A variable-column layout
The redrawing mechanism is very simple: new CSS classes are applied to the three sections. In the three-column layout, section 2 is floated right instead of left. In the single-column layout no floats are used. The layout to be used is selected by comparing the total window-width to the width of one of the side sections (which is 12em).
I have kept the layout very simple – and boring – in order to keep the mechanism easy to understand. Feel free to nose around the source. (As if I could stop you ...)
The layout has been tested successfully in Opera 7 to 10, Firefox 1 to 3, Chrome and IE 6 to 8 (on Windows XP).
So far the only circumstances I have found where it doesn't quite do what was intended is if you apply the Opera zoom function (vigorously) and then refresh. The section widths returned in this case are the unzoomed widths, not the actually displayed widths, which can lead to the “wrong” number of columns being displayed. But then the whole idea of flexible layouts is that the user gets a readable page without having to resort to zoom functions, so this issue is pretty trivial.
Last updated: 9 January 2011