Proper HTML alignment/sizing of two adjacent 50%-width/equal height fieldsets with a 100%-width below?

Question

Hi - I would like to lay out an area like this:

---- ----
|A | |B |
|  | |  |
---- ----
---------
|C      |
---------

where each of the three boxes is a <fieldset>. Box A and B might be populated by different amounts of items, yet they should both be the same height (the height of the one that needs to be larger).

Box C should be 100% width and right below them.

What is the proper/esaiest HTML/CSS/JS to accomplish this?

EDIT: I forgot to add the possible wrinkle that inside the fieldsets is a "jEditable" such that the fieldset height might change dynamically, and the other fieldset would need to resize too.

Answer 1

A {
    float:left;
    width:50%;
}

B {
    overflow:auto;
}

C {
    clear:left;
}

Don't know if you want more ?

Answer 2

Rather than using float, I solved it like this:

fieldset.sidebyside
{
    width: 48%;
    display: inline;
    vertical-align: top;
}

using an HTML structure that looked like this

<div class="sidebyside">
    <fieldset class="sidebyside"> ... </fieldset>
    <fieldset class="sidebyside"> ... </fieldset>
</div>

There are a number of approaches to the "equal height" problem, as detailed in this blog post: http://www.ejeliot.com/blog/61.

I was eventually successful using a personalized variant of this specific solution, which uses jQuery to size (and resize) the divs using min-height: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/