Basic tasks are simple in CSS, but even slightly harder tasks can be incredibly difficult. Controlling fonts, margins, and so forth is a piece of cake. But controlling page layout is another matter. In his book Refactoring HTML, Elliotte Rusty Harold describes a technique as
so tricky that it took any smart people quite a few years of experimentation to develop the technique show here. In fact, so many people searched for this while believing that it didn’t actually exist that this technique goes under the name “The Holy Grail.”
What is the incredibly difficult task that took so many years to discover? Teaching a web browser to play chess using only style sheets? No, three column layout. I kid you not. He goes on to say
The goal is simple: two fixed-width columns on the left and the right and a liquid center for the content in the middle. (That something so frequently needed was so hard to invent doesn’t speak well of CSS as a language, but it s the language we have to work with.)
You can read more about the Holy Grail of CSS in an article by Matthew Levine.
I appreciate the advantages of CSS, though I do wish it didn’t have such a hockey stick learning curve. I’ve heard people say not to bother learning overly difficult technologies because if you find it too difficult, so will everyone else and it will die off. But CSS seems to be firmly established with no competitor.
5 thoughts on “The Holy Grail of CSS”
Yes, I remember a number of years back thinking that I needed to port a Web site to CSS. I came upon an online discussion between CSS experts debating the best way at the time to approximate the “Holy Grail” you describe above, and after reading all of it, decided I’d simply wait. No regrets…
I decided to bite the bullet and get started with CSS. I’m not looking for the holy grail. (I lost my belief in Silver Bullets and the Holy Grail long ago.) I just want an attractive and easily changed website. I found this example so fascinating that it kicked off the whole process. http://www.w3schools.com/css/tryit.asp?filename=trycss_float6. It’s overly simplified, but it demonstrated the power of CSS layout for me.
The URL I posted in the last comment was maimed. It should be
In databases we have a name for how to deal with this problem. It’s called denormalization. Use a simple single row, 3 column table and be done with it. A little table goes a long ways to making CSS behave across all browsers. Purists will cringe, but your website users will love you.
I’m sure you’ve seen CSS Zen Garden, but I’ll mention it anyway. Shows what you can do with CSS knowledge (and design talent).
The problem with CSS for most folks is its declarative nature. Like other declarative mini languages, regex/SQL, it’s powerful but requires a change in mindset.
I have a love/hate relationship with CSS. Parts of it are awesome – like descent selectors. But some simple things seem incredibly difficult – like centring.