flexible layout to fit the browser width

Question

I have a layout of 3 columns. I need left and right divs width to be fixed in pixel and middle div should be extending based on the browser width.

Reference image

Grey and red divs width is fixed in pixels so that those two should be always right and left to the browser and green div shouldn't have any width because it should extend based on the browser width.

Here is the demo which i tried so far http://jsfiddle.net/JvHZ7/

Answer 1

You can use CSS tables. Here's a demo: little link. The basic outline would look like this, HTML:

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
}
.fixed {
    width: 150px; /*or whatever you want*/
}
.fluid {
    /*yep, nothing*/
}

Answer 2

Try this jquery,

var left = $(".left").width();
var right = $(".right").width();
var main = $(".wrapper").width();
var setwidth = main - right - left;
$('.center').css("width", setwidth);

Here the Demo: fiddle

I hope this may helpful to you.

Answer 3

You can check this : http://jsfiddle.net/SHnc9/1/

This technique is known as negative column and it's used if you need to support IE7 and below.

Consider this HTML:

<div class = "container">
    <div class = "fixed first">
        I'm the first fixed
    </div>
    <div class = "fluid">
        I'm fluid!
    </div>
    <div class = "fixed last">        
        I'm the last fixed
    </div>
</div>
​

and CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    text-align: center;
    float:left;
}
.fixed {
    background: rgb(34, 177, 77);
    color: white;
    width:150px;
    position:relative;
}
.fluid {
    background: rgb(0, 162, 232);
    float:left;
    width:100%;
    margin-left:-150px;
    margin-right:-150px;
}
​

This method is cross browser, doesn't require any hack and doesn't need JavaScript.

Answer 4

display: table; is not compatible in IE 7;

If you want to use jquery, do the following.

var thisWidth = ($(window).width()) - 220 - 140;
$('.center').css("width", thisWidth);​

also note that height:100%; will not work to fix the height with the surrounding divs.