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

enter image description here

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/

score 1 · Accepted Answer · answered Sep 27 '12 at 12:47

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*/
}

answered Sep 27 '12 at 12:47

Chris

26,544
5
58
71

@Sowmya You had `float: right;` in your `.right` CSS. Here's a fixed version: [little link](http://jsfiddle.net/glee/Ce2SH/). – Chris Sep 27 '12 at 13:05
Center div is gong down in this example – Sowmya Sep 27 '12 at 13:10
@Sowmya You had more `float`s, here's a fixed version: [little link](http://jsfiddle.net/glee/6bqsE/). – Chris Sep 27 '12 at 13:16
Here's a version with margins using inner divs (margins aren't working in that approach) and two fixed divs on the left: http://jsfiddle.net/stadolf/9VMmC/ – Stefan Jan 19 '14 at 22:17

score 1 · Answer 2 · answered Sep 27 '12 at 13:14

1

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.

answered Sep 27 '12 at 13:14

Selvamani

7,434
4
32
43

Ahmad Alfy · Answer 3 · 2012-09-27T13:23:06.193

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.

This should be at the top given that it is cross browser solution. — Henrik Petterson, Mar 21 '15 at 19:04

Gezzasa · Answer 4 · 2012-09-27T13:04:38.890

0

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.

edited Sep 27 '12 at 13:04

answered Sep 27 '12 at 12:57

Gezzasa

1,443
8
17

flexible layout to fit the browser width

4 Answers4

Linked