In Search of the Holy Grail

by Matthew Levine

225 Reader Comments

Back to the Article
  1. I need to place horizontal navigation in the #Header. However, as this contains ‘float’ it causes the #container to collapse for some reason. I have tries to ‘clear:both’, but nothing seems to work. I am reasonably new at css and am really struggling.

    Can anyone explain why?

    My code is as the original example, with this added menu…

    <ul id=“navbar”>
    <li class=“page_item”>Home</li>
    <li class=“page_item”>Titles</li>
    <li class=“page_item”>News</li>
    <li class=“current_page_item”>About</li>
    </ul>

    The added css…

    #navbar {
    float: left;
    margin: 0;
    padding-top: 5px;
    list-style: none;
    background: #5DF4C5;
    }

    #navbar li {
    float: left;
    margin:0;
    padding:0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1em; }

    #navbar a {
    float:left;
    display: block;
    margin: 0 2px 0 0;
    padding: 4px 20px;
    color: #369;
    text-decoration: none;
    border-bottom: none;
    background: #5DF4C5;
    }

    #navbar li a.current_page_item {
    color: #369;
    background: #fff;
    font-weight: bold; }

    #navbar li a:hover.current_page_item {
    background: #fff;
    color: #369;
    }

    #navbar li a:hover {
    background: #369;
    color: #fff;
    font-weight: bold; }

    Copy & paste the code below to embed this comment.
  2. I have a problem with IE (in FF all works superb). In IE left columns after load is disappear till I move mouse over right column. After them all works without problems. Can someone tell me why?

    Here is link do this page:

    http://www.dywiz.com/test/arbitraz/

    thanks in advance.

    Copy & paste the code below to embed this comment.
  3. First off: love this article. It helped me tremendously. One problem I can’t seem to fix is that when resizing my browserwindow in IE6.0.29 (using the middle top-right browserbutton), the left column ‘forgets’ the margin and is placed to the right of the container area. You can find an example on http://www.niios.nl/test/testpage.php
    I really hope you can help me with this.
    Kind regards,

    Vivienne

    Copy & paste the code below to embed this comment.
  4. As always a great article.  Of course with a new Windows OS (Vista) comes a new IE with new problems, works great on Firefox but on IE 7+ the left column is totally off the page, hidden way left.

    Copy & paste the code below to embed this comment.
  5. Great article, it has helped me a lot.

    As Max Fraser mentioned, the left column has disappeared in IE 7. Just wondering if anyone knows a work around yet?

    Cheers

    Copy & paste the code below to embed this comment.
  6. The holy grail yes, it may be mighty, but it has a little bit of a problem when using anchor tags. I found out this problem while working on a project at work. So I created a test page for you users to check out and see if you can come up with a solution.

    http://www.arnoldeqp.com/ala.htm

    Travel to the link above, and click on one of the 3 list items in the main part of the page. They read Exclusive Listing, Consignment, and Outright Purchase. If you click on one of those links it will shoot you to that area below on the page using an anchor tag. What happens in the might holy grail is that you get stuck and can seem to get back to the top of the page. It displays everything in the source code, but just chops off the top.

    If any of you have a solution for this might problem I would love to hear from you.

    Copy & paste the code below to embed this comment.
  7. @Brandon Livengood
    In regards to your problem check out http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

    Copy & paste the code below to embed this comment.
  8. I just came back to laugh at all the people who still believe CSS DIVS are a great way to layout a site. As usual, a new browser release breaks the ‘hacks’ used to force the layout to work.

    While you guys tear your hair out trying to get a simple 3 column expanding layout to work in CSS DIV, I will use tables and feel very relaxed and happy.

    TABLES ARENT BROKEN so i wont fix them.

    Copy & paste the code below to embed this comment.
  9. This is a great attempt at a lean three column layout.  However, It doesn’t work at all in IE 5.2 for mac.

    Copy & paste the code below to embed this comment.
  10. Hi there,

    I have been using this design now for a few websites, and I have been very happy with it (I did adapt it by putting conditional comments instead of hacks)

    I would think it would be very helpful to update the article with the new corrections (including the left column disappearing issue) and, most importantly, using conditional comments instead of hacks.

    I don’t understand why hacks are still being used!!

    Also, while I’m at it, I can point you to a weird issue in IE7:
    “www.nuiregister.com”:http://www.nuiregister.com/

    For some reason the footer shifts up to the top of the page.
    On top of this the page has a huge amount of white space at the end.

    I think working in IE7 corrections is going to be very very important what with it’s impending release and Automatic Update distribution.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.