textwrap

running words around
design education and visual communication
authored by chris m hughes

Look Ma - no Div's, no Float's, no Bugs.

Saturday, 28 February 2009

As css becomes the standard for web layouts, more and more designers are beginning to see the possibilities.

The crowing achievement of css has been to fully separate content from presentation. This means that with say a 50-page website, you can make a major layout change to every page with just a single edit in a css file. It's this sort of flexibility which has seen the table layout become obsolete.

So it comes as a great surprise to see a css-based method of laying out webpages which retains the basic power of css and yet manages to jettison the main concepts that normally make it all work - the div tag, and its positional properties - float and clear.

Confused? Don't worry. I was. Everyone I've spoken to about it is.

The method is a clever extension of the technique for styling ordered lists to create tabbed menus. In the standard technique, ordered list items use the inline and block display properties to create block areas that work like buttons for menus.

Its actually no great leap to see how we could use lists to display inline as larger block elements - effectively as content areas. And that's exactly what Thierry Koblentz has managed to do.

He uses ordered lists to lay out his pages. The markup of his documents are DIV-less. The structure relies entirely on OLs (Ordered Lists). In doing so, the typical bugs and workarounds required for float and clear are removed. And removing the css reveals a set of numbered paragraphs which have a perfect semantic relationship in the flow of the document.

You need to check out his explanation and demo to get the full picture - its certainly complicated but the idea is undeniably powerful.

He does point out what you might suspect - that the technique was invented purely as a thought experiment to show it could be done, not to seriously challenge the practical beauty of DIV layouts.