Three-column CSS layout - fixed/max./variable width

Question

I'm having trouble getting the following three-column layout to work:

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

Where:

A is fixed width.
B uses any available space in the container not used by the columns A and C.
C contains content which may change width and need to "push" B to a different width.

Here is my best attempt at creating this: http://jsfiddle.net/x3ESz/

All the other topics I have looked at suggest having all three as floating with B using margins to prevent wrapping, but this doesn't allow for C to resize B based on C's content (as a value must be given for B's right margin).

I also really want to avoid resorting to JS to achieve this.

score 17 · Accepted Answer · answered Feb 06 '12 at 19:29

17

This can easily be solved by adding overflow: hidden to #div_middle and removing the margins:

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

See: http://jsfiddle.net/thirtydot/x3ESz/1/

This works in all modern browsers and IE7+.

answered Feb 06 '12 at 19:29

thirtydot

224,678
48
389
349

A much simpler solution than I would've expected. Works perfectly. Many thanks! – Alex Feb 06 '12 at 19:36

score 0 · Answer 2 · answered May 24 '13 at 12:41

Does even work with both variable width sidebars :

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}

score 0 · Answer 3 · answered Feb 06 '12 at 19:37

You can fix it without changing your layout if you use this script:

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});

Three-column CSS layout - fixed/max./variable width

3 Answers3