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