Problem with box with two columns

[PeterHo]

I got a problem with having the box with two columns
adapt the height to the highest of the two columns.
The left column is much higher than the right column but the box wrapping them take the height of the right column. This problem only appears in Firefox and not IE.
How can I solve it? It seems that float cause the problem, but is there another way to arrange two columns without float?

Here's the CSS code for the three boxes, cBody2 being the big box and leftContent/rightContent being the columns:

#frameBody { width: 810px; height: 100%; background: #ffffff; margin-right: auto; margin-left: auto; position: relative;
border-right: 1px solid #999999; border-left: 1px solid #999999; border-bottom: 1px solid #999999;
border-top: 1px solid #999999 }
#frameSpace { width: 830px; height: 100%; padding: 10px; background: none; margin-right: auto; margin-left: auto; position: relative; }
#cBody2 { width: 800px; height: 100%; background: #ffffff; margin-right: auto; margin-left: auto; position: relative; top: 0px;
border-right: 1px solid #999999; border-left: 1px solid #999999; }
#leftContent { float: left; width: 550px; height: auto; padding: 20px; position: relative; }
#rightContent { float: right; width: 170px; height: auto; padding: 10px; position: relative }

Here's the actual page:
<div id="frameSpace">
<div id="frameBody">
<div id="cBody2">

<div id="leftContent">
Left column
</div>

<div id="leftContent">
Right column
</div>

</div></div></div>

Thanks

[Fotiman]

This is a common stumbling block. Firefox is actually behaving correctly. When you float an item you take it out of the flow. In order to get your containing block to 'contain' the floats, the easiest way to fix it is to add a non-floated element below your floats that clears them. Since that element is still in the flow, your container will wrap around that element. And since you clear the floats, that element will be pushed down below the floated elements, ensuring that the container contains the longest item.

Another alternative would be to float the container. It will then 'contain' its floated children. But this usually has other side effects that are hard to work around as well.

Try adding something like this after your rightContent div:

<br style="clear:both;">

[PeterHo]

That solved the problem, thanks!

[scraptoft]

Great advice Fotiman I have been trying to figure this out for..well too long!

I had read something in another thread on WW about using an element that clears the float but didn't quite understand it.

For anyone reading this that is having similar problems you should deffinately attempt the <br style="clear:both;"> before trying other fixes - it's fixed my head ache ;-)