Just in case you might want a three-column layout that doesn't require the usual sacrifices, we thought we'd share this technique. Not that you'd want that or anything.
I'm sorry. Really. I didn't name it. I don't mean to overstate its importance or trivialize the other and rather weightier Holy Grails. Article Continues Below But the name's out there, and we all know what it means. Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail. Many articles have been written about the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout. A recent project has brought my personal grail quest to an end. The technique I'll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility. It will: have a fluid center with fixed width sidebars, allow the center column to appear first in the source, allow any column to be the tallest, require only a single extra div of markup, and require very simple CSS , with minimal hacks patches. On the shoulders of giants#section2 The technique presented here is inspired by Alex Robinson's brilliant One True Layout. Alex even addressed the Holy Grail problem in his article, but his solution requires two wrappers and makes padding difficult without a further layer of div s within each column. Another lead came from Eric Meyer's adaptation that uses positioning to mix multiple unit types. His example also yields a three-column layout with fixed sidebars and a liquid center. Unfortunately, it relies on approximate percentages and fills a portion of the viewport that varies widely with different screen resolutions. Enough talk—let's see some code#section3 The required HTML is intuitive and elegant. (For the sake of clarity…