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.

Answer 1

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