CODEWITHSUNDEEP
csslayoutcss-floatvariable-width
Alex
Alex

Reputation: 1578

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

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

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

Where:

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.

Upvotes: 8

Views: 2243

Answers (3)

Alexander
Alexander

Reputation: 698

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

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228152

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+.

Upvotes: 17

Related Questions