You are hereThe Holy Grail CSS Layout Fix for IE7

The Holy Grail CSS Layout Fix for IE7


By Gerd Riesselmann - Posted on 08 November 2006

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 */
}

Update: See below for applying the fix to the padded version.

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.

Lifesaver! Thanks very much.

This fix for the Holy Grail layout for ie7 works perfectly. Thanks.

Hi,

I tried that fix but it didn't work for me. I am using the padded version on alistapart and I changed both of my left and right column widths to 175px. The fix on this site appears to be for an unpadded version as well. My version worked great in firefox (still does) and IE6. But, yesterday I downloaded IE7 and what I get is described below.

My problem is this. My left, center and right columns are fine in proportion left to right, but, the page becomes very long. Maybe a few thousand pixels I'm guessing. And, at the bottom the right column comes up shorter than the left. Plus the footer is missing entirely. I didn't change any of the padding-bottom or margin-bottom values either. So, I'm stumped! Any ideas?

Thanks,
Seth

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.

I tried this on the example and it worked.

Did you resolve this issue? im having it too

A very nice fix. Thanks very much! I'm sharing it with my classmates at San Jose State - I'm taking a web development course there. A lot of us have been using the "Holy Grail" layout for our course project, and with IE7 we were stumped. The prof was going to let us slide as long as our web pages render in IE6, since he fed us the "Holy Grail" layout to use in the first place, but now that won't be necessary.

Anyway, thanks again!

Is there a working example on this site of the IE7 fix layout, or could someone be willing to send it to me? Much appreciated,
Miki

Thank you so much for sharing the disappearing left column fix for the holy grail layout in IE7. I thought I would never a fix for it until I browsed through the discussions and find the link to this site. I'll be sure to link this fix in my CSS file. Thank you again, you saved my life! hehehe:D

Why don't you actually post a link to a WORKING example of your fix!?? I can't get it to work using the padded (container) version. I add your code to the end of the CSS, and it gets messed up in Firefox and IE7 is still screwed (but you can see the left column). Please check out http://www.croatiankid.com/fixdontwork.html to see what I see, OR, if you DON'T see what I see, see http://www.croatiankid.com/ref.jpg (it looks the same like that in IE7 except the font is larger).
Thank you so much for any help on this.

By looking into the CSS of your example it seems you didn't apply the IE6 disappearing column fix first. My IE7 patch is a patch to this patch.

I am having the same problem as croation kid. I have applied the patch or update whatever you want to call it in every way I can think of. Do you have a complete example of it with all patches and updates applied? I am using the full height example if it matters.

I still get a horizontal scroll bar at the bottom in IE7. When I scroll to thr right there is some blank space after the right column.

Yeah, I see it, too. Weird, since the body actually is exactly the size of the layout. I have no idea where this comes from.

However, my advice is to use the non-padded layout and add an extra div for the padding, like this:

Your content here..

Padding now can be achieved easily like this:


#left div { padding: 20px 10px; }

This technique is described in Dan Cederholm's [amazon title 0321346939]

I'm using your fix successfully, thanks very much. I am having another problem, however, which is that the footer is not layong out correctly. Specifically, it appears (in IE7 for WinXP Pro) that the main column and the right hand column are floving over the footer, and the three columns are all different lengths now.

Have you experienced such a bug?

I am having a problem with the footer fix; rendering perfectly in IE6 and earlier using padding-bottom: 10010px; margin-bottom -10000px; In IE7 this results in the footer disappearing, although the left column is OK

I have tried wrapping the footer fix in a comment but no change. Any ideas ?

Fixed !

Visit http://alistapart.com/comments/holygrail/?page=22 - lot's of good stuff there

Hey thanks!

I've got it working at http://www.yarks.com - woo hoo! Was a little worried when my client called and said, "um, the entire navigational column is missing." This was easy and works perfectly!

Andi
Big Sea Design

Hey, thanks a lot for this fix!
I have it up and running, but with a small problem: the left padding on the left column is different in Mozilla than in IE7 (-_-#)

You can check in http://www.adeptos.org

If I use this expression:

#container > #left {
left: -210px;
margin-left: expression(...);
}

It looks good in Mozilla but wrong in IE7. All the opposite if I do this:

#container > #left {
left: -220px;
margin-left: expression(...);
}

Any good ideas out there?

I found that the version that did away with the extra container -- the version at the bottom of the original article -- did not have the IE7 missing-left-column problem.

You saved my life wth this fix - thanks.
(If only it were possible without javascript!)

I had another problem with IE7, however, which I've been trying to understand... the footer jumps up to the top of the screen covering the header, and nothing else is displayed beneath it.

I've been experimenting endlessly and have no ideas left. Why would IE7 do this despite its working in every other modern browser?

Theories?

I just solved the footer jumping problem and thought I would post this in case anyone's interested or had a similar problem:

There was an image in the right column which, when removed, made IE7 display the whole site perfectly. All the latest versions of FF, Safari, Konqueror, Opera & Netscape (on all platforms) PLUS IE6 were already displaying everything with no problems, but the presence of the right-column image resulted in ONLY the header and footer displaying (the footer overlapping the header) with blank space beneath them when viewed in IE7.

Why? - Anyone's guess! The image in the right column was absolutely positioned, but no fiddling with the exact pixel values of the postioning or the z-index made any difference - it's presence still resulted in IE7 screwing up the entire layout.

Other factors: there were no floats in the right column; the image was much smaller than the width of the column; the right column, in accordance with the layout of "A List Apart's Holy Grail" had a negative margin. I mention this things as I can imagine them being first ports of call for debugging, but I repeat that every browser was displaying it perfectly. (No known IE7 bugs seem to fit the bill as potential culprit)

Solution: a container div for the image in the right column. Simply:

...with no other specifications, and as if by magic, IE7 was brought back into line!

If someone has a theory, I beg of you to post it here, as I'm dying of curiosity. Why on earth would wrapping the img in a div make such a difference in IE7?

Anyway, I'm happy - my site is now cross-browser compatible (as long as we don't venture into the ungodly realms of IE5.5!) :-)

Take a look: http://www.mathesonbayley.com/

I am new at building a website. I don't understand why everyone wants to replace tables for CSS layout. Is it because tables load longer, and do they really? Microsoft's Hotmail page still uses tables, judging by clicking on "view source." Excuse me for the novice questions, but above is stated that "Comic Marktplatz" website uses this CSS layout, why is it that when I richt click on "view source" I don't see any of the structure html, and when viewing the page it just comes out as a list? Is this Holy Grail CSS layout free of bugs now, and if so, is there a place where it is posted in full form? Any comments would be appreciated, thank you
miki_z@hotmail.com

This solution breaks the zoom feature in IE7. Zeldman would not be happy.

"The Holy Grail" - all the fixes collated in one place...

I've just put together a little page with all the various 'fixes' lying around the internet for Matthew Levine's "The Holy Grail", along with a few tips of my own for succesfully implemeting it in a real-life scenario.

See http://myoozikmuse.blogspot.com/ for the complete updated template, which includes, naturally, Gerd's IE7 input!

Hope it's of use to somebody. :-)

(See www.mathesonbayley.com or www.indigoivories.com to see the template in action)

Thanks for your work on the fixes as it was a lifesaver.
bob

*STILL* no working examples posted ??
Mathesons examples are anything but "using limited hacks", its full of hacks infact.

If someone got a working version for ie7, please post !

Well, mine IS a 'working example', although, admittedly, purists are gonna blanch at the sight of all the hacks. :-)

Having said that, however, as outlined on http://www.mathesonbayley.com/holy_grail.php , the majority of the 'hacks' in my code that you refer to are ONLY necessary IF you want to do some specific things (which many people will not want/need to do):

To clarify, the 'firefox container divs' and IE conditional comments in my code are only necessary IF you have floated elements in the center column AS WELL AS more than one image in the center column OVER WHICH you wish text to appear (i.e. 'pseudo-background images', resolving the CSS limit of most browsers of having more than one background-image per element).
You can see those multiple background images on http://www.mathesonbayley.com in the center column (one in the top right, one in the top left, and the musical stave farther down the page).

If such multiple background images are not needed, then (again, as explained on http://www.mathesonbayley.com/holy_grail.php ), all those 'hacks' can be ignored.

By the way, I keep putting 'hacks' in inverted commas coz I consider these particular examples to be 'fixes'/'patches' of an unavoidable nature, rather than 'hacks' in the sense of non-future-proofed shenanigans such as the 'Holy hack'.

Every other 'hack' in my code has been shown to be necessary for full cross-browser compatibility by many minds far greater and more experienced than mine, and unless or until an even larger giant than those on whose shoulders we all stand comes forth with a cunning alternative, it seems to be the general consensus that this 'Holy Grail' ain't gonna work without 'em.

Well, I've always been a pragmatist, so I'm perfectly happy with the results, despite my umpteen extra divs, but of course I understand that this won't be for everybody.

Ooh, my pizza just arrived...
:-)

The non-padded version of Holy Grail (or the updated Disappearing Column version) does not need this kind of IE7-fix, only thing you need to do is to move the min-width: 550px declaration from body to #container-div. As for the padded version, you can always use wrappers and add the padding you need to those divs.

This works at least in IE of version 7.0.5730.11.

Actually, no it doesn't. I just clicked the link in IE 7.0.5730.11 and no left bar showed up.