I want to create a 3-column layout with fixed-width left and right column, and middle column taking the rest of the space. That’s pretty easy. Now I want the middle column to have a min-width, and the rightmost column to wrap under the middle column if the total width is too small.
This is the normal layout:
+----------+ +------------------------------+ +--------------------+
| LEFT | | MIDDLE (main) | | RIGHT |
+----------+ +------------------------------+ +--------------------+
This is the layout under a certain total width:
+----------+ +-------------------------+
| LEFT | | MIDDLE (main) |
| | +-------------------------+
| | +--------------------+
| | | RIGHT |
+----------+ +--------------------+
- I don’t mind changing the order of the DIVs in the HTML.
- I don’t mind wrapping DIVs in extra DIVs.
How about this: http://jsfiddle.net/X3tPJ/
“Right” will wrap under “Main”, but those two won’t wrap under “Left”.