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
2 Comments
And suddenly, my simple open source templates appear way to simple to be good… Damn… =)
Most importantly, you can let the markup order be nice to those who use text-only browsers. As a sometimes-mobile browser … I’d be real appreciative.
4 Trackbacks
[...] [via Geek Ramblings] [...]
[...] CSS: The One True Layout Ready for something practical? Reskin my WordPress blog page… [...]
The One True Layout
Dougal points to The One True Layout, which is a bit presumptuously named [given my hatred of superlatives and my disdain for self proclamations …], but still seems damn cool.
…
[...] One Layout to Rule them All — Dougal Campbell has discovered the One True CSS Layout. The technique, created by Alex Robinson of Position is Everything, doesn’t quite live up to its grandiose name but still provides a mind-bending level of flexibility for three-column layouts. Some of the ideas could be easily adapted to other layout styles, and indeed I found that I’d already used some of his techniques in a simpler form for this weblog and for Little Elegy. [...]