In Search of the Holy Grail

by Matthew Levine

225 Reader Comments

Back to the Article
  1. 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

    Copy & paste the code below to embed this comment.
  2. 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

    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. 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?

    Copy & paste the code below to embed this comment.
  5. 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

    Copy & paste the code below to embed this comment.
  6. Example 2, the left column has gone in IE7

    http://www.alistapart.com/d/holygrail/example_2.html

    Sorry :)

    Copy & paste the code below to embed this comment.
  7. 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.

    Copy & paste the code below to embed this comment.
  8. 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!!!

    Copy & paste the code below to embed this comment.
  9. 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.

    Copy & paste the code below to embed this comment.
  10. 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 :-)

    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. 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.

    Copy & paste the code below to embed this comment.
  13. 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?

    Copy & paste the code below to embed this comment.
  14. 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.
  15. 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!

    Copy & paste the code below to embed this comment.