The Holy Grail CSS Layout Fix for IE7

In Search of The Holy Grail describes an easy way to create a three-column, source-ordered, table-less layout with a fluid column in the middle. It is used by the Comic Marktplatz, for example. However, there is an annoying bug with the shiny new Internet Explorer 7. IE7 has a problem in understanding the left column rule of

{ margin-left: -100%; }

Instead of considering the width of the surrounding div container, IE7 inserts the width of the body, which leads to the left column being moved out of sight to the far left. Here’s how to fix it.

I experimented a little with overflow, position, and other attributes without any success. However, since IE supports JavaScript expressions in CSS, this can be used to apply a fix (The fix is a fix to this fix, actually):

#left {
  width: 200px;             /* LC width */
  margin-left: -100%;
  left: 150px;              /* RC width for IE6 */
}
#container > #left {
  left: -200px;             /* -LC width for others */
  margin-left: expression(document.all.center.offsetWidth * -1); /* Fix for IE7 */
}

In the case of the padded version, the left and right padding of the left and the left padding of the center column must be added to the margin like this:

#container > #left {
   left: -200px; /* -LC width for others */
   margin-left: expression(
   document.all.center.offsetWidth * -1 +
   parseFloat(document.all.center.currentStyle.paddingLeft) +
   parseFloat(document.all.left.currentStyle.paddingLeft) +
   parseFloat(document.all.left.currentStyle.paddingRight)
   ); /* Fix for IE7 */
}

“left” in document.all.left is the id of the left column.

Attention: Note that “center” within the expression document.all.center.offsetWidth refers to the column with the id “center”, as it was named in the original version. If you named the middle column differently, you must change this, too.