Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

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

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
This entry was posted in Browsers, CSS, Design, Standards, Tech and tagged , , , . Bookmark the permalink.

6 Responses to CSS: The One True Layout

  1. Pingback: Full(o)bloG » Blog Archive » Alla ricerca del layout perfetto

  2. Andreas says:

    And suddenly, my simple open source templates appear way to simple to be good… Damn… =)

  3. Pingback: -<( TechSteward )>- » Blog Archive » CSS Will Save You…

  4. Plus you get to keep your content sections in a logical sequence.

    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.

  5. Pingback: The Indiana Jones School of Management

  6. Pingback: Geeky Links (8 Ways to Sunday)

Leave a Reply

%d bloggers like this: