Posted by dave on 04/29/07 00:59

The article "In Search of the Holy Grail" at http://www.alistapart.com/articles/holygrail/
appears to only work when using pixels. I'm referring in particular to
his final example he calls the "wrapper free" at
http://www.alistapart.com/d/holygrail/example_4.html. Once you use ems
instead of pixels it fails horribly on IE7, FF2, and Opera9.2. I've
played with it a little but I'm not any good at CSS. I've also
searched about for other templates but out of the 30 or so I've seen
they all use pixels. I want to use ems so I can expand and contract
the text.

The problem seems to be due to the header and footer. If you color
them you can see the header doesn't fit correctly causing the
horizontal scroll bar to appear.

There's a php script I made to generate the CSS according to the
authors comments.
The first parameter is the size of the left column, the the padding of
the left column, the padding of the center column, the size of the
right column, and finally the padding on the right column, in that
order.

You can see by using the following params "prog.php 180 10 20 130 10"
it spits out the same numbers as the author has, but using ems not
pixels. Change the parameters to something that makes more sense for
ems, like 10 1 2 10 1 and see what you get. The example and program
are at www.seobm.com/home.shtml

[Back to original message]