Three divs: div 1&2, stacked next to div 3

eft · May 3, 2010, 7:24am

Hi, I’m wondering if it is possible, using the following markup, to create the layout below? Thank you.

div 1 | |
| |
---------------- | div 3 |
div 2 | |
| |

John_Betong · May 3, 2010, 10:27am

Try wrapping your script in HTML tags:



  <div class="container" >

     <div class="div-1">
     </div>

     <div class="div-2">
     </div>

     <div class="div-3">
     </div>

  </div><!--  class="container" -->

  <div class="container" >

         <div class="div-1">
         </div>

         <div class="div-2">
         </div>

        <div class="div-3">
        </div>

  </div><!--  class="container" -->

.

eft · May 4, 2010, 4:36am

Sorry about my OP - I am trying to use css to create the same layout as this <table> produces.

<table>
<tr>
  <td>div1</td>
  <td rowspan="2">div3</td>
</tr>
<tr>
  <td>div2</td>
</tr>
</table>


  <div class="container" >

     <div class="div-1">
     </div>

     <div class="div-2">
     </div>

     <div class="div-3">
     </div>

  </div><!--  class="container" -->

  <div class="container" >

         <div class="div-1">
         </div>

         <div class="div-2">
         </div>

        <div class="div-3">
        </div>

  </div><!--  class="container" -->

John_Betong · May 4, 2010, 5:01am

Try this:



<table style='width:420px; margin:2em auto; border:solid 1px'>
<tr style='border:solid 1px #000'>
  <td style='border:dotted 2px #000'>
  	div1
  </td>
  <td rowspan="2" style='border:solid 1px #000'>
  	div3
  </td>
</tr>

<tr style='border:solid 1px #000'>
  <td style='border:dotted 2px #000'>
  	div2
  </td>
</tr>
</table>

<div style='width:42&#37;; margin:2em auto; border:solid 1px'>
	
	<div style='float:right; width:48%; height:240px; border:dotted'>
		div 3
	</div>	
	
	<div style='float:left; width:48%; height:120px; border:solid 1px'>
		div 1
	</div>	
	
	<div style='clear:left;float:left; width:48%; height:120px; border:solid 1px'>
		div 2
	</div>	

</div>

.

eft · May 4, 2010, 6:18am

John - Thanks, that is very helpful.

However, the way the container (outside div) border is rendered varies between browsers: In IE7 and Op10 the borders go all around the three inner divs as expected but for Chrome/FF the inner divs seem to float below the container somehow.

Also, is it essential to use a div height because I’m not sure how much content will be inside each div?

PaulOB · May 4, 2010, 8:35am

Hi,

You could do something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
    float:left;
    border:1px solid #000;
    border-top:none;
    margin:20px;
    clear:both;
}
.inner {
    float:left;
}
.box {
    float:left;
    width:200px;
    clear:left;
    border-right:1px solid #000;
    border-top:1px solid #000;
    margin:0 -1px 0 0;
    position:relative;
}
.box2 {
    width:200px;
    clear:none;
    border-left:1px solid #000;
    margin:0 -1px 0 0;
}
</style>
</head>
<body>
<div class="container" >
    <div class="inner">
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
<div class="container" >
    <div class="inner">
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
<div class="container" >
    <div class="inner">
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
</body>
</html>

However it would be much easier using a table and if you want to copy exact table behaviour then I would say use a table until IE7 is dead and you can use display:table instead.

The issue is probably why you need something like and perhaps a design change would simplify things so that you don’t need tricks like this

eft · May 4, 2010, 1:54pm

Thanks - I am constrained by the CMS such that I cannot wrap my div1 & div2 within an inner div. I appreciate that table perhaps makes more sense.

PaulOB · May 4, 2010, 2:54pm

Well it can be done without the inner but needs hacks for iE6.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
    float:left;
    border:1px solid #000;
    border-top:none;
    margin:20px;
    clear:both;
}
.inner {
    float:left;
}
.box {
    float:left;
    width:198px;
    clear:left;
    border-top:1px solid #000;
    border-right:1px solid #000;
    margin:0 -1px 0 0;
    position:relative;
    padding:1px;
}
* html .box{margin-right:-4px;}
.box2 {
    width:198px;
    float:none;
    clear:none;
    border-left:1px solid #000;
    border-right:none;
    margin:0 0 0 200px;
}
* html .box2{margin-left:197px}
</style>
</head>
<body>
<div class="container" >
    <div class="div1 box">
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
    </div>
    <div class="div2 box">
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
<div class="container" >
    <div class="div1 box">
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
    </div>
    <div class="div2 box">
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
<div class="container" >
    <div class="div1 box">
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
    </div>
    <div class="div2 box">
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
    </div>
    <div class="div3 box box2">
        <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
    </div>
</div>
</body>
</html>

eft · May 4, 2010, 3:19pm

thanks again - very helpful!

Three divs: div 1&2, stacked next to div 3

div 1 | | | | ---------------- | div 3 | div 2 | | | |

div 1 | | | | ---------------- | div 3 | div 2 | | | |

div 1 | |
| |
---------------- | div 3 |
div 2 | |
| |

div 1 | |
| |
---------------- | div 3 |
div 2 | |
| |