I don't think so using floats.
IE6 does not obey the bottom:**px code although Firefox does, so 4 will always go below 3, leaving a gap below 4 to the bottom row 5.
You will have to make 3 a fixed height to keep 4 near to 5.
However, if rows 4 are given position: absolute they should stay in the same place in the wrapper 5. The wrapper 5 needs to be given position: relative so that the position: absolute of 4 relates to 5's top left corner and not the body top left corner.
See http://www.wickham43.supanet.com/tutorial/divboxes.html item 1.
You should only do this if the wrapper has a fixed height (which in your case it has) as a position: absolute in a flexible div will not work if the height of 5 changes.
-------------
See http://www.wickham43.supanet.com/for...oca060906.html
Code:
<div style="position: relative; width: 730px; height: 400px;
padding: 30px; background-color: silver; margin: auto;">
<div style="float: left; width: 365px; height: 100px;
background-color: green;">Div 1</div>
<div style="float: right; width: 365px; height: 100px;
background-color: pink;">Div 2</div>
<div style="float: left; width: 730px; background-color:
lime;">Div 3 flexible height (no height stated)<br/>div 3<br/>div
3<br/>div 3<br/>div 3<br/>div 3</div>
<div style="clear: both; width: 100%; line-height:0;
font-size:0;"> </div>
<div style="position: absolute; width: 730px; top: 330px; left:
30px; height: 100px; background-color: azure;">
Div 4<br/>div 4<br/>div 4<br/>div 4</div>
</div> <!--end of wrapper div-->
It worked in Firefox straight away but I had to add the divider div with clear both to make it work in IE6.
Last edited by Wickham; 06 Sep 2006 at 12:24 PM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.