3网格布局：固定侧边栏和流体内容

Question

I want to create a layout whose its structure is a mixed-type. I want two sidebars: one in the left side, another in the right side - both of them has 250px of width; in the middle, I just want the content whose its width is fluid.

I can make some math to solve my problem like calc(100% - 500px) , but I really don't want to use CSS3 for this – I want a cross-browser solution, and it can be pure CSS2 or JavaScript.

Can someone suggest me something? It can be a grid system, functions, etc.

Answer 1

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

css

.left{
    width: 250px;
    position: absolute;
    left: 0;
}
.center{
    display: table;
    position: absolute;
    left: 250px;
    right: 250px;
}
.right
    width: 250px;
    position: absolute;
    right: 0;
}

Answer 2

1. Get the document width:
   var documentWidth = $(document).width();
2. Remove the 'px':
   documentWidth = documentWidth.split('px')[0];
3. Calculate the width of the middle div:
   var middleDivWidth = documentWidth - 500;
4. Set the calculated width to the middle div:
   $('#middleDivId').css('width',middleDivWidth+'px');

Answer 3

CSS:

.div1 {
    width: 250px;
    float: left;
}
.div2 {
    overflow: hidden;
    width: auto;
    float:left;
}
.div3 {
    width: 250px;
    float: right;
}

JSFIDDLE