How to proportionally fill a space around a fixed size div?

Question

Could someone please help me?

I have three divs.

enter code here

• The one in the middle should always be 1040px.
• The left and right one shall fill the whole left space.

How can I make them proportionally grow/shrink when I resize the window?

Here is the code:

http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d

Thank you very much in advance!

Answer 1

Here is a pure CSS option using CSS display properties of table and table-cell.

DEMO: http://jsfiddle.net/audetwebdesign/a9J7D/

The markup is the same as you proposed.

The CSS is:

.container {
    width: 100%; 
    min-width: 540px; /* you may want this... */
    margin: 0 auto;
    outline: 1px dashed blue;
    display: table;
}
.bar-light {
    width: auto;
    height: 52px;
    background-color: blue;
    display: table-cell;
}
.bar-dark {
    width: 540px;
    height: 52px;
    background-color: red;
    display: table-cell;
}

Set display: table to .container and for the child elements, display: table-cell.

For .bar-light, set the width to auto and they will be computed to fill in the remainder of the page width (equally).

In my example, I set the center width to 540px to make it easier to see in the fiddle.

Finally, add a min-width to .container, without any content, the table cells will collapse to zero width as you shrink the window size.

Note About Heights

This layout will create three columns of equal height, the height will be computed to enclose the tallest of the three child elements.

Answer 2

This is real quick so it might be slightly off but you should be able to get the idea

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

div { float: left;}
.b { width: 1040px;}

JQuery

$(document).onload(resize);
$(window).resize(resize);
function resize() {
    var ww = $(window).width();
    var width = (ww-1040)/2;
    $('.a').width(width);
    $('.b').width(width);
}

Answer 3

Add a table with 3 column. In the middle column add you div. specify the size you want for this for these column e.g. 10-80-10. or -80-.