Introduction In search of the One True Layout

Pure CSS-based layouts have come a long way but they still have shortcomings [note] that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility

That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns

Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns

Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Towards a solution

This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layoutâ„¢ [note].

Problems with the Equal Height Columns method

Several problems have been found with the Equal Heights method, detailed in Appendix J.

Footnotes

  1. Miscellaneous remarks on the conventions used in this article can be found in the final appendix.
  2. Though obviously, table-based layouts have even greater shortcomings. Arguments about those shortcomings are well known and beyond the scope of this article.
  3. To be ultra clear, there is no one true layout. I am actually referring to the power to organise the underlying structure of your documents in a meaningful way, rather than the visual layout itself. I am not advocating three columns or whatever as the ultimate in design, nor am I claiming that the particular document structure and naming conventions I've used here represent the final word in information architecture. Rather I'm trying to show that such layouts do not require the kind of kludges in general use that preclude other layouts. When freed from presentational-driven wrappers and non-logical ordering, a document can be styled any which way you like, be it as columns or frames or even just one long sausage. And when freed from the tyranny of presentational straitjackets, the structure of the document need only be considered with regard to semantics and accessibility. And from such rich semantics flow the hooks to make applying visual design easier... As for the name, it's a feeble gag referencing the original holy grail for CSS layouts as well as that other timesink for nutters of a different persuasion, the one true cross. Just be thankful that I didn't write the article in full-on messianic millenial fever mode as I thought of doing. Yes, other layout techniques exist and may even be better for your needs - we'll get to those in the course of the article. And any mentions of trademarks are, sigh, jokes. All methods described here are released into the public domain.
Position is Everything