Forgot how to properly tame the CSS layout beast, you say? Or didn’t learn it in the first place? Worry not, since here’s a list of a couple of the best and easiest layout techniques.

The present

Missing something fundamental that should be part of this list? Let me know in the comments!

1. Fluid center, fixed sidebars: The holy grail

Originally published in 2006, I still find this one of the best techniques for a fluid/fixed layout. It features clean semantics and only very little hackery and makes sure all columns can grow organically. And you are seeing it being used right now, on this blog.

2. Fluid width, equal hight columns

O common problem with the holy grail technique is that it doesn’t produce equal height columns – a feature many designs require. This nifty CSS-Tricks guide summarizes many of the most popular ways to achieve the desired effect (including flexbox!).

3. Vertically centered content

Vertical centering has been CSS’ Achilles’ heel for years, and almost every junior web developer tries to use “vertical-align” early on – only to discover that it doesn’t actually vertically align (well, duh! [..ok ok, it does, but only for inline content in table cells]). While not a complete page layout technique, this tutorial shows you a couple of ways to center your elements.

The Future

I have good and bad news. The good news is that the W3C CSS Working Group is currently working hard on CSS Grids, an new spec with a very specific goal: To give us back our sanity by fixing the CSS layout mess. The bad news is that the spec is still not implemented in any browser today (Nov 2012), and it might take a while before you can use it in production.

And by the way – while Flexbox is another useful upcoming spec, its main usecases are more granular (perfect for vertical centering!) and not perfectly suited for an overall page layout. That being said, it has one big advantage: You can trial it today in the most modern browsers :) Zoe’s great presentation will get you going if you must.