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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jay1607Author Commented:
cxr.. Thank You!!!  exactly what I needed.  Worked beautifully.  THANK YOU!
Jay1607Author Commented:
Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.