CSS: two floating div columns with equal height, with vertically split right div

I'm trying to accomplish a layout like the one below:

Two float:left divs are positioned side by side, each with 45% of the width. On the right, the div contains two subsections - one aligned to the bottom of the div and one aligned to the top.

If the sections on the right get long enough, they will of course meet in the middle and then begin pushing out the height of the containing div:

I've been playing with faux-columns, clear:all, overflow:hidden, bottom:0, and any other tricks I could think of, but I can't get this behaviour to work.

The real problem seems to be stemming from the smaller of the left and right div not expanding to the height of the container, which takes on the height of the larger of the two using overflow:hidden. Any thoughts?

What I have so far:

<div style="overflow:hidden; clear:both">
    <div id="column1" style="float: left; width:45%">
    <div id="column2" style="float: left; width:45%">
        <div style="float: left; top: 0">Content Here should sit up top</div>
        <div style="float: left; bottom: 0">Content Here should sit on 开发者_如何学Cbottom</div>
    </div>
</div>

This is how it's turning out, I can't get the top and bottom to separate without using fixed heights somewhere:

Thanks for having a look guys!

I have CSS solution, as JS is not do-able..

Example: here

all "columns" are inline blocks forced not to wrap, that way you can vertically align them all, then the 3rd "column" (bottom right) is slotted into place via a negative margin

You can drop the floats and give it a try with display:table-cell (and table, table-row...) but that would limit browser support from IE8 and up.

But if you do get it to work like that, you could just use javascript to get IE6 / IE7 to play nice (if you need them to...).

You'll go insane trying to accomplish this with CSS by itself.

If you only need to support modern browsers, you can use display: table which will give you the vertical alignment control of a traditional table.

Otherwise, this is really a job for JS and if you're using something like jQuery, it's fairly trivial to accomplish.

You need to use JavaScript, inside $(document).ready you can set up 3 variables, one for each height. Add an aditional div (lets call this expansor) between the two right ones, and depending on the heights of the other three, change this div (expansor) height.

remember, var dos = $("#one").height(); gives you the height of a div with id ="one"

To change a div height, just use $("#expansor").height(newHeight) ;

Been 'newHeight' the result of the first div height minus the 2 right divs.

As previously said, you're going to go crazy trying to make this work across the board on all browsers without using a ton of JavaScript.

My solution has been to use a combination of absolute and relative positioning teamed up with a min/max-height scenario. You'll also be using a few more nested DIVs making sure to use dummy "clear:both" DIVs to make sure you properly push things.

Example:

<!-- Clear CSS -->
.clear {
    clear:both;
    height:0;
    line-height:0;
    margin:0;
    padding:0;
    font-size:0;
    border:none;
}
<!-- End CSS -->

<div id="container" style="width:400px;position:relative;">
    <div id="column-right" style="height:300px;width:195px;float:right;">
        <div id="block-top" style="position:absolute;top:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div id="block-bottom" style="position:absolute;bottom:0;height:145px;">
            <div class="content">
                ...
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div id="column-left" style="position:relative;height:300px;width:195px;float:left;">
        <div class="content">
            ...
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>