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>

Select allOpen in new window