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.

This entry was posted on Monday, April 2nd, 2007 at 12:31 pm and is filed under Refactoring HTML, Web Development. You can follow any responses to this entry through the Atom feed. Both comments and pings are currently closed.