The Holy Grail Refactored

Here’s a neat rearrangement of Matthew Levine’s Holy Grail CSS layout (fixed width left and right columns and liquid inner column) I’ve devised for Refactoring HTML. This is based on the non-equal height, no extra-div version. The basic idea is reorganizing the style rules into three sections:

  • The rules whose values must be copied verbatim.
  • The rules whose values can be set to arbitrary values.
  • The rules whose values are calculated based on the arbitrary values.

This makes it easier to see exactly what you can change independently, and what else you have to update when you make such a change. Here’s a sample stylesheet. LC stands for left column, RC for right column, and CC for center column.

/* Fixed Values */
body {
    margin: 0;
}

#CC {
    width: 100%;
    position: relative;
    float: left;
}

#LC {
    margin-left: -100%;
    position: relative;
    float: left;
}

#RC {
    margin-right: -100%;
    position: relative;
    float: left;
}


/* Chosen Values */

#CC {
    padding-right: 5em;
    padding-left:  5em;
}

#LC {
    width: 9em;              /* LC width */
    padding-right: 1em;  /* LC right padding */
    padding-left: 1em;    /* LC left padding */
}

#RC {
    width: 7em;              /* RC width */
    padding-right: 2em;  /* RC right padding */
    padding-left: 2em;    /* RC left padding */
}

/* Calculated Values */

body {
    /* LC width + LC right padding + LC left padding */
    padding-left: 11em;  

    /* RC width + RC right padding + RC left padding 
     + CC left padding + CC right padding */
    padding-right: 22em; 

    /* LC width + LC right padding + LC left padding 
    + CC left padding + CC right padding */
    min-width: 21em;     
}

#LC {
    /* LC width + LC right padding + LC left padding 
    + CC left padding + CC right padding */
    right: 21em;       
}

Here’s an example document that uses this layout. I haven’t yet tested this in Internet Explorer, and at least older versions of that browser will likely have problems. The layout works in Firefox and Safari. The same hacks for IE that Levine used in his original article should still apply here.

This refactoring doesn’t let you do anything you can’t do now, but it does make it easier to modify the widths of the columns.

5 Responses to “The Holy Grail Refactored”

  1. Adrian Says:

    That looks like a great layout, but when I set my Firefox browser to 800×600, the RC disappears to below the CC. Is there an easy way to modify the posted CSS so that the RC stays put at 800×600 res?

  2. Adrian Says:

    Ahh. On IE6 / WinXp the LC is almost never viewable. LC seems to be marooned off display to the far left. If I resize browser width down to 100px or so it does make an appearance briefly, but at that width the RC is naturally long gone. Rats.
    If I had a dime for every time a great CSS layout crumbled in the face of Internet Explorer… well I suppose we’d all be rich! ๐Ÿ™‚ I really like your concept here though, it would make modifying a layout to suit purpose x much easier… any chance of a version 2?

  3. Elliotte Rusty Harold Says:

    Pushing the right column below when the window is too narrow is a feature, not a bug. ๐Ÿ™‚ The alternative is horizontal scrolling which is really annoying, or perhaps the even more annoying overlapping of content The assumption here is that the main content is in the center while the left and right columns contain extraneous, less important information like navigation and ads.

    I will have to do some more testing with IE. Levine’s original version did include some IE specific hacks I have not yet reproduced here. I’ve played with them. However they seem to depend on Quirks Mode. They do not operate in standards compliant mode. Suggestions for fixing this are appreciated.

  4. Martins Notepad » Blog Archive » The holy grail CSS Says:

    […] Eliotte Rusty Harold writes about a slightly modified version of the “The holy grail” CSS layout on his weblog. […]

  5. John Jacob Says:

    what the hell is CSS