Cape Town SPIN

The Logo

Upload the image, under "File attachments" below. After clicking on "Attach", a URL appears underneath the filename.

Use the /cms/... part in the src="..." as in above. Add style="float: left" or right, or just leave blank lines between the image and surrounding text.

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.

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: