CSS Block Layout Frustration

I am currently going nuts over a CSS layout problem.  Best way is to explain with an example below.

To simplify what i am trying to do, I have 3 main blocks, top, middle and bottom.  Each needs to sit under the next.  In the middle block, there are two blocks, left and right.  I want the middle block to wrap around the outer of the its contained left & right blocks, and ensuring that the bottom block sits below these.  I am setting all blocks to position:relative.

If I don't set the middle-left&right to float:left, the middle block wraps around fine, and the bottom block sits below the middle block fine, BUT, my right block is below my left block.

IF I set left and right block to float:left, my inner (left and right) blocks are now sitting side by side (left on left side, right on right side) as they should, but the middle block (which my left and right blocks are INSDE of) now contracts up.. its bottom border does not sit below the bottom of the left and right block.  And the bottom block moves up and displays on top of the middle block.  This only happens in Firefox.. IE seems to be fine.

I have been pulling my hair out with this for hours and will fall passionately in love with whoever can understand my convoluted description above and save my sanity.

Thanks in advance
<div id="topBlock">
..
</div>
 
<div id-="middleBlock">
   <div id="LEFTBlock">
   ..
   </div>
   <div id="RIGHTBlock">
   ..
   </div>
</div>
 
<div id="bottomBlock">
..
</div>

Open in new window

Jay1607Asked:
Who is Participating?
 
Roger BaklundCommented:
Have you tried clearing the bottom block? Like this:

#bottomBlock { clear: both }

If you need to have a visible middleBlock, insert a dummy clearing block within it:

<div id="middleBlock">
   <div id="LEFTBlock">
   ..
   </div>
   <div id="RIGHTBlock">
   ..
   </div>
   <div style="clear:both"></div>
</div>
0
 
Jay1607Author Commented:
cxr.. Thank You!!!  exactly what I needed.  Worked beautifully.  THANK YOU!
0
 
Jay1607Author Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.