Box model hack for IE5.0 support.

I’m using the liquid CSS layout described in [url=http://www.alistapart.com/articles/holygrail/]this page[/url], because it is easily the most impressive I have found so far. It has one problem: It completely breaks down in IE5, apparently. The author says that a “simple box-model hack” would be enough to fix that problem, but he doens’t go into detial on how to do it or apply it to this layout.

Here’s the basic code, since reading the article is time-consuming and probably unnecessary for someone who knows what they’re doing:

[code]<div id=”header”></div>

<div id=”container”>
<div id=”center” class=”column”></div>
<div id=”left” class=”column”></div>
<div id=”right” class=”column”></div>
</div>

<div id=”footer”></div>[/code]

[code]body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}[/code]

The result is this: [url]http://www.alistapart.com/d/holygrail/example_2.html[/url]

What would I have to do to apply one of these “box model hacks” to this layout? A good link telling me about box-model hacks would be enough, I’m sure.

EDIT: [url]http://tantek.com/CSS/Examples/boxmodelhack.html[/url]

I’ve read through that a few times, and I begin to understand. I think. Would I just have to apply this hack to every box that I specify a margin and/or padding too, and then it would all work perfectly in IE5, as well as everything else?

I don’t really understand how the hack works though, and I can’t say I’m thrilled at the idea of using something I don’t understand.

Also in #CSS _↴