Holy Grail on A List Apart

My Holy Grail article went up at A List Apart earlier today, and the reaction so far has (mostly) been fantastic:

The simple CSS seems to be too good to be true... Thanks.

Varun N

Simple, sweet, concise, and I've been beating the stuffing out of it on different browers, trying to mess it up with incorrectly sized photos — and it hangs in there. Great article, keep up the good work...

Larry Preston

Levine's Holy Grail version is great, and it does (gasp!) work in newer versions of IE... Great article and great layout.

Andrew Peace

And — if you can forgive my enthusiasm — the article currently has over 1,200 diggs and nearly 1,500 del.icio.us bookmarks. Huzzah!

Unfortunately, a couple problems have popped up.

The Firefox Wrap

As reader j i pointed out, resizing beneath a minimum width in Firefox causes the right column to wrap. Fortunately, the solution was quickly discovered by Martin Halford:

The right column dropping down in Firefox can be cured if min-width is increased by 1px to 631px...

I could have chosen a more generous min-width; something around 750px would probably be the best option for an actual site.

Internet Explorer Woes

I thought my IE testing was pretty thorough. After each revision, I'd put the layout through the paces: scrunching the width, resizing the window horizontally and even diagonally.

Apparently I neglected to resize the window vertically. It's just not something I make a habit of doing. But not so with the enterprising ALA readers.

I'm not yet aware of any solution for this behavior (other than resizing your browser horizontally — that pops the column back in place). I'll investigate, and as soon as I figure out why the devil this is happening, I'll post an update.

Update: this problem has been solved.

The * html Hack

Several readers bristled at my use of the now unfashionable * html hack. As well they should! The workaround is trivial. I considered including it in the article, but I decided that it broke the flow, and that anyone concerned enough would be able to maneuver around it.

So instead of doing this:

#left {
    right: 200px;  /* LC width */
}

* html #left {
    left: 150px    /* RC width */
}

... do this:

#left {
  left: 150px    /* RC width for IE 6 */
}

#container > #left {
  right: 200px;  /* LC width for everyone else */
}

Conditional comments work, too.

Limited Support for Older Browsers

Other readers took exception to the fact that this technique does not support browsers that have been out-of-date for five years (IE5, I'm looking at you). That's exactly why I wrote this:

The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.

If your browser logs indicate that you need to support IE5, this technique is may not be for you (or would at least need some modification).

If you can do without that last <1% of people still stuck with 90's technology, give this layout a look. It's meant to be a handy tool, not a CSS panacea. Which brings me to the final point:

How Dare You Call This The Holy Grail!

Again, my apologies. By the time I started playing with this layout, "Holy Grail" already meant a 3-column liquid layout with fixed sidebars. You can see the term in use on the many sites I referenced.

So I take no responsibility for the nomenclature, and fully acknowlege its non-miraculousness.

By the way, a big thanks to Jason for the excellent diagrams, Erin for all of her help getting the article online, and Eric and Jeffrey for their most helpful feedback.