CSS: The One True Layout

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

Related posts:

1. return(true);
   " function do_stuff() { if (in_array($date, $holidays) && $vacation == true) { travel('away'); visit_family(); $gifts->exchange(); eat(); travel('home'); } if ($new_year == true) { eat() &&..."
2. Tables vs. CSS
   " “I would like to get away from tables all together. Does anyone know of any examples of markup for a tableless calendar?” Where did..."
3. Intel Macintosh rumors true!
   " I hadn’t been keeping too close an eye on this, because we’ve got higher priorities right now than buying new computers. But there have..."
4. Browsenberg Uncertainty Principle
   " Co-worker Stephen Touset has described what he calls the Browsenberg Uncertainty Principle: As one increases the layout precision of a section on a webpage,..."
5. IE7 and the demise of CSS hacks
   " As mentioned previously here and elsewhere, Microsoft is working on Internet Explorer 7, which will have greatly improved CSS support. The IE7 team has..."