LAYOUTS - CSS: Professional Techniques for Modern Layout - page 133

Figure 4-28: Any-order columns based on percentage widths.

135

THE HOLY GRAIL
A follow-on to the “One True Layout,” the “Holy Grail” technique is another serious tool with
a cheeky name. First published by Matthew Levine a few months at er One True Layout made
its debut, the Holy Grail builds on Alex's work with some contributions by your humble
author to create a hybrid l uid/i xed layout independent of course order. (See http://
alistapart.com/articles/holygrail for the original.)

In this approach, given three columns, the outer two are of i xed width and the innermost is
l uid, resizing itself to i ll any available space. Holy Grail starts with the usual three column
div s, plus a necessary container.

< div class ="contain">
< div class ="column one " > ... </ div >
< div class ="column two " > ... </ div >
< div class ="column three " > ... </ div >
</ div >