Question

I have 3 divs, ‘left div’, ‘right div’ and ‘bottom div’. I have been hopelessly trying to position them in a certain way but it just doesn’t work. This is how I would ideally like them to be:

The main problem is the fact that ‘left div’ and ‘right div’ are of different heights so how would I sort this mess out?

EDIT: I would also like to add that the left and right divs need to be centered within the content area.

Answer 1

<div id="content">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
    <div class="bottom">
        Bottom
    </div>
</div>

css:

#content{
    width:1000px;
    margin:0 auto;
}

.left{
    width:495px;
    float:left;
    margin-right:10px;
}

.right{
    width:495px;
    float:left;
}

.bottom{
    clear:both;
    margin-top:10px;
}

then if you want the left and right to match:
(using jquery)

$(document).ready(function(){
    var leftdiv = $('.left').height();
    var rightdiv = $('.right').height();

    if(leftdiv > rightdiv)
        $('.right').css('height', leftdiv + 'px');
    else
        $('.left').css('height', rightdiv + 'px');
});