Copy & paste the code below to embed this comment.
Andrea Reatti
IE 7 seems not to care about the margin/padding-bottom “trick”: the page looks 1 mile long.
Giving “position:relative” to the div #container solves the problem.
I’ve put in the min-width fix, but my right column still shifts when the center column gets shorter than the two other columns. Any thoughts? Please excuse the mess at the site right now http://www.murmp.com still just testing stuff out.
The structure/layout code is at http://www.murmp.com/css/proper.css
FYI, I am using conditional source code output (still fine tuning that as well, but most new FF gets “correct” code), so if it isn’t right, then let me know and I’ll just hard code to always give the “proper” source.
There you go. Instead of adding an extra DIV and a whole bunch of star-hacked CSS, just use the !IMPORTANT modifier to force IE to do your bidding.
I’ve only tested this in IE 6, ‘cause that’s all I have handy at the moment. Can anybody take a look at other versions of IE and see if they behave nicely when spoken to firmly?
I just implemented this – I had been looking for a decent solution to this problem for a while having implemented my own 3 column/center fluid design to replace a table layout. I could never get a image to be fixed at bottom right and so have left my old table powered layout in place for a number of years.
I’ve just solved this by doubling up on the container and 3 cols B4 the footer (obviously giving them new IDs so as not to be unstandard). Placing the image in the right column.
This is a great article and something that has enabled me to get my menu working in ie6 (see weeteevee’s site).
Up to last night I just used a standard 3 div left/middle/right layout. When I put the menu into the left pane it refused to work in ie6. I cried, I wept, I discovered that if the menu div is in the content after the div that it will be layered over when expanded then the menu will work. So I remembered bookmarking this in delicious and here I am and there is works (I’ve applied the disappearing left column fix and am ploughing through the rest of the posts.
However, I have got to say, the amount of grief that is involved with all of this when we have the simplicity of tables at our disposal is enough to make me want to scream. Afterall did people drop their bicycles while cars were being perfected? No they did not. Css / standardisation is a long way off and realistically at a basic layout level tables do everything you need without the fuss or 23 pages of forum responses.
Thanks for the article, and as message to the haters….keep whining it serves as a reason to go make more tea.
The holy grail, much like all complex css based sites does not work. The left hand column behaves like a ginger kid at a playground and spends most of its time off the screen. In the end I had to float the center 3 panes and remove their position: relative in order for the vertical flyout menu to work correctly. Basing a whole industry on something this complex and broken (css) is insane. We should all be rethinking our use of css.
Many months ago I was looking for a multi-column CSS approach and found this article. I implemented it in one of my personal sites but I have noticed that while it displays almost fine in Firefox 2.0 it doesn´t do well in IE6.
In IE6 the three column layout is kind of broken, the left and right columns show fine. But the middle column instead is flushed down so that the top side is not aligned with the top of the other two columns.
Can anybody tell me whether this was intended and perhaps what is wrong with it?
that means you havent followed the instructions correctly. I would suspect you have put a margin on it, or maybe i removed a margin to get mine to work.
Copy & paste the code below to embed this comment.
vikki neal
Has anyone got this layout working in netscape 8.12? not my browser of choice, but I’m just curious…
I seem to be having problems with the page extending way beyond the actual content (especially evident when you re-size the browser window to approx 800×600 or less). Also, I have noticed that occasionally the copy in the left/right columns cuts off when it reaches the footer – ideas anyone?
225 Reader Comments
Back to the ArticleAlex Leonard
I have the holy grail implemented in a more complicated site here:
“www.invisibleagent.com”:http://www.invisibleagent.com
In this case, for IE7, I have temporarily used conditional comments to set #footer-wrapper to display:none
Other than this footer issue and the extremely long page(?!), everything else is hunky dory.
Cheers for all the hard work.
Alex
Andrea Reatti
IE 7 seems not to care about the margin/padding-bottom “trick”: the page looks 1 mile long.
Giving “position:relative” to the div #container solves the problem.
Ciao,
Andrea
Jonathon Suggs
I’ve put in the min-width fix, but my right column still shifts when the center column gets shorter than the two other columns. Any thoughts? Please excuse the mess at the site right now http://www.murmp.com still just testing stuff out.
The structure/layout code is at http://www.murmp.com/css/proper.css
FYI, I am using conditional source code output (still fine tuning that as well, but most new FF gets “correct” code), so if it isn’t right, then let me know and I’ll just hard code to always give the “proper” source.
Will Martin
There’s a much simpler way to fix the background-not-clipping problem in IE. I demonstrate:
#footer { background-color: #66FF66 ! IMPORTANT; }
There you go. Instead of adding an extra DIV and a whole bunch of star-hacked CSS, just use the !IMPORTANT modifier to force IE to do your bidding.
I’ve only tested this in IE 6, ‘cause that’s all I have handy at the moment. Can anybody take a look at other versions of IE and see if they behave nicely when spoken to firmly?
Tom Leadbetter
Will Martin – I’ve been using a few other “holy grail” layouts but still prefer this one over all of them.
However, I’ve only just had a chance to test it in the new IE7 and there is a horizontal scrollbar along the bottom:
http://www.alistapart.com/d/holygrail/example_4.html
on example 3, the footer has gone:
http://www.alistapart.com/d/holygrail/example_3.html
Tom Leadbetter
Example 2, the left column has gone in IE7
http://www.alistapart.com/d/holygrail/example_2.html
Sorry :)
Amit Varia
Is there any way to accomplish when the divs are ordered:
left, right, center?
Your example currently goes:
center, left, right
This currently doesn’t work semantically for my design since it would display the content in an incorrect order if you’re using a text base browser.
Adam Pearson
I just implemented this – I had been looking for a decent solution to this problem for a while having implemented my own 3 column/center fluid design to replace a table layout. I could never get a image to be fixed at bottom right and so have left my old table powered layout in place for a number of years.
I’ve just solved this by doubling up on the container and 3 cols B4 the footer (obviously giving them new IDs so as not to be unstandard). Placing the image in the right column.
It works a treat.
thank you!!!
Gerd Riesselmann
Here’s a fix for the disappearing column problem in IE7:
http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7
It uses IE’s expression keyword to calculate left margin at runtime, since IE7 is misinterpreting the -100% margin.
Gerd Riesselmann
Sorry, I was expecting the URL to render automatically…
Here’s the click-friendly “IE7 Fix for Holy Grail”:http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7 :-)
james williams
This is a great article and something that has enabled me to get my menu working in ie6 (see weeteevee’s site).
Up to last night I just used a standard 3 div left/middle/right layout. When I put the menu into the left pane it refused to work in ie6. I cried, I wept, I discovered that if the menu div is in the content after the div that it will be layered over when expanded then the menu will work. So I remembered bookmarking this in delicious and here I am and there is works (I’ve applied the disappearing left column fix and am ploughing through the rest of the posts.
However, I have got to say, the amount of grief that is involved with all of this when we have the simplicity of tables at our disposal is enough to make me want to scream. Afterall did people drop their bicycles while cars were being perfected? No they did not. Css / standardisation is a long way off and realistically at a basic layout level tables do everything you need without the fuss or 23 pages of forum responses.
Thanks for the article, and as message to the haters….keep whining it serves as a reason to go make more tea.
james williams
The holy grail, much like all complex css based sites does not work. The left hand column behaves like a ginger kid at a playground and spends most of its time off the screen. In the end I had to float the center 3 panes and remove their position: relative in order for the vertical flyout menu to work correctly. Basing a whole industry on something this complex and broken (css) is insane. We should all be rethinking our use of css.
Didimo Grimaldo
Many months ago I was looking for a multi-column CSS approach and found this article. I implemented it in one of my personal sites but I have noticed that while it displays almost fine in Firefox 2.0 it doesn´t do well in IE6.
In IE6 the three column layout is kind of broken, the left and right columns show fine. But the middle column instead is flushed down so that the top side is not aligned with the top of the other two columns.
Can anybody tell me whether this was intended and perhaps what is wrong with it?
james williams
that means you havent followed the instructions correctly. I would suspect you have put a margin on it, or maybe i removed a margin to get mine to work.
vikki neal
Has anyone got this layout working in netscape 8.12? not my browser of choice, but I’m just curious…
I seem to be having problems with the page extending way beyond the actual content (especially evident when you re-size the browser window to approx 800×600 or less). Also, I have noticed that occasionally the copy in the left/right columns cuts off when it reaches the footer – ideas anyone?
Many thanks!