Dougal Campbell's geek ramblings

I had recently been using Alex Robinson’s 3-column CSS technique called “ordered columns, float-margin/float-margin” for some website designs. But he has superceded that with the One True Layout. OTL combines methods for source-ordered columns, techniques for equal-height columns, and “vertical grids” to provide a flexible method of creating complex page layouts, while maintaining a minimum of markup clutter. Plus you get to keep your content sections in a logical sequence.

Check out the examples for an idea of what you can achieve. In particular, look at the Nested Rounded Corners example. Then look at the table version at the bottom of the page. Note the difference in the source order. The table version forces you to reorder the information in ways that wouldn’t make sense if you were trying to decipher the HTML source (I’m speaking of all the “block N top” and “block N bottom” elements). The OTL version keeps related bits of information together in a straightforward flow.

This is going to take some time to properly absorb…

via: webgraphics