Question

I want to have 3 divs aligned inside a container div, like this:

[[LEFT] [CENTER] [RIGHT]]

Container div is 100% wide (no fixed width), and center div should remain in center after resizing the container.

Left and Right DIV have no fixed width and need to expand/contract with the container. Center DIV does have a fixed width.

I have this:

<div style="width: 100%">
    <div style="float: left; height: 50px;"></div>
    <div style="float: right; height: 50px;"></div>
    <div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>

Problem is, the left and right do not show because there is no set width

Any suggestions?

Answer 1

You can’t do that with pure CSS. You need to use JavaScript. In the example below Middle div is fixed at 400px while remaining space is be split between left and right divs. With jQuery you can do

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

Check working example at http://jsfiddle.net/M5Ghx/3/