Yesterday I noticed that my new home page was a disaster in IE7. I’d cribbed a CSS-based three-column layout from Google’s Page Creator. Then, as is my custom, I’d pruned away as much of the complexity as I could. But evidently I pruned too much of, or the wrong parts of, the the CSS gymnastics encoded in that example. So I wrecked the layout for Internet Explorer.

As per comments here, standards support in IE7 is a thorny issue and discussions of it are heavily polarized. But I aim to be (cue Jon Stewart) a uniter not a divider. So here I simply want to give props to this article by Matthew Levine, from A List Apart. From it, I cribbed the wrapper-free Holy Grail. It’s a minimalistic CSS-based three-column layout that seems to work well in every browser I’ve tried: IE6, IE7, Firefox, Safari.

To be honest, although I’m hugely fond of CSS styling, I’ve always struggled with CSS layouts, and I know I’m not the only one in that boat. When you read the explanation in Matthew’s article, you can see why. CSS layout is like one of those games where you slide 15 tiles around in a 16-square matrix. In principle it is a declarative language, but in practice the techniques are highly procedural: Step 1, Step 2, etc.

Whether that’s good or bad, and to what extent CSS layout really does trump table-based layout — these are interesting questions but separate discussions. The bottom line here is that I wanted to do a CSS-based layout, I wanted it to be as minimal as possible so I’d have the best shot at understanding and maintaining it, and I wanted it to behave reasonably in a variety of browsers. For that I needed the pattern, or recipe, which Matthew’s article helpfully provided.

It’s appropriate that he calls the technique the Holy Grail because the three-column layout applies very broadly. Yet, though there are tips and tricks all around the web, I’m not aware of a well-known cookbook, or pattern library, that:

  • Identifies the handful of most popular layouts.
  • Illustrates minimal, bare-bones CSS treatments.
  • Certifies those treatments for cross-browser use.

For extra credit, this cookbook could filter the recipes according to whether support in each of the major browsers is must have or nice to have or optional.

Cross-browser issues have always been a headache, they still are, and the reality is that dealing with them requires hacks. The more we consolidate and simplify the hacks, a la Matthew Levine’s holy grail, the better.