Section 1

This section could for example be a menu.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Section 2

And this could be the ‘latest news’ section.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

A variable-column layout

This is an experimental HTML/CSS/Javascript layout aimed at increasing the flexibility of web layouts. (Those of you who like buzzwords can call it DHTML if you wish.) The page initially opens as a two-column layout. If the window is a wide one, when measured in relative units (ems), and if the reader has Javascript enabled, then the page is redrawn as a three-column layout. Similarly, for narrow windows it is redrawn as a single column. (If the user changes window size, the page is redrawn on refresh.)

It thus follows the principles I espouse on several pages on this site: the page is readable for anyone without Javascript, but script is used to refine the 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.

Stephen Poley

Last updated: 9 January 2011

Web Matters main page