layout problem 2 divs onto of 2 divs

[SBee]

Hi -

I need to achieve this:

¦-------- HEADER -------¦
¦---1 ----------¦---2---¦
¦---3 ------¦-------4---¦
¦-------- FOOTER -------¦

Header
1 (div) 2 (div)
3 (div) 4 (div)
Footer

I need 2 divs to stack on top of 2 other divs and I cannot use absolute positioning, also the site is fixed width.
Having a variety of issues, so i won't post my bad code.

Thanks in advance
Shawna

[sectionq]

#container {margin:0;width:700px}
#header {width:700px;background: yellow;height:100px}
.boxone {width:400px;margin:0;background: #ccff33;float:left;height:100px}
.boxtwo {width:300px;margin:0;background: #990000;float:left;height:100px}
.boxthree {width:200px;margin:0;background: #cccccc;float:left;height:100px}
.boxfour {width:500px;margin:0;background: #999999;;float:left;height:100px}
#footer {width:700px;height:100px;background: #006633;clear:both}

<div id="container">
<div id="header">header</div>
<div class="boxone">box 1</div>
<div class="boxtwo">box 2</div>
<div class="boxthree">box 3</div>
<div class="boxfour">box 4</div>
<div id="footer">footer</div>

[swa66]

If you would have variable height in the boxes (instead of the fixed 100px), I'd give .boxthree a "clear:left;" (needed in case the boxone is longer than boxtwo)

[SBee]

Thank you - You sure made that easy for me!

Shawn

[sectionq]

Just be aware that if you put margins and borders around your boxes that the boxes won't fit inside the container horisontally so you'll have to change it a bit, also remember that different browsers (ie usually) render differently so you may need to make boxes 1 or 2px smaller just to make it behave the same in all.