Please Help with DIV Layout 1

[twofive]

I'm trying to layout my html page the "correct" way (as opposed to using tables). The problem is, I cannot set up the layout the way I like using divs without absolute positioning. What I'd like is a "container" div, and inside this container, I'd like six divs: two rows of 50% width divs and two rows of 100% width divs. All rows using relative positioning so that the divs can expand vertically with text. I'll attempt to illustrate:
[tt] _______
|1 |2 |
|___|___|
|3 |4 |
|___|___|
|5 |
|_______|
|6 |
|_______|
[/tt]
(See attachment for non-ascii representation)

I get all hung up on the css float property, and I can't get the divs to line up properly. Can someone help me with a code sample? Thanks in advance!

 

[vacunita]

This should do what you want. I tested it in IE6 and FF 2. and It works similarly.

#container{
width:800px;
border:1px solid black;
}

#sect1{
width:100%;
}

.fifty{
width:49.5%;
border:1px solid red;
float:left;
}

.sects56{
width:100%;
border:1px solid green;
clear:both;
}

<div id=container>
	<div id=sect1>
		<div id=fifty1 class="fifty">1<br><br><br></div><div id="fifty2" class="fifty">2<br><br><br></div>
		<div id=fifty3 class="fifty">3<br><br><br></div><div id="fifty4" class="fifty">4<br><br><br></div>
	</div>
<div stlye="clear:both;"></div>
	<div id="sect5" class="sects56">5<br><br><br></div>
	<div id="sect6" class="sects56">6<br><br><br></div>

</div>

I gave the 4 50% width boxes an additional container, and a cleared the floats in th bottom two boxes.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[twofive]

This works great! Interesting trick with the "fifty" class, in that if you must use width:49.5% and not width:50% with float:left or else the 50% divs do not align properly.

 

[vacunita]

that happens because it can't accommodate both divs if they are exactly half of their container. They need to be slightly smaller so they fit inside the container.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.