CODEWITHSUNDEEP
javascripthtmlcss
Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

3 grid layout: fixed sidebars and fluid content

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.

Upvotes: 0

Views: 93

Answers (3)

Nick
Nick

Reputation: 1570

CSS:

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

JSFIDDLE

Upvotes: 0

andrea-f
andrea-f

Reputation: 1055

  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');

Upvotes: 0

alessandrio
alessandrio

Reputation: 4370

<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;
}

Upvotes: 2

Related Questions