In Search of the Holy Grail

by Matthew Levine

225 Reader Comments

Back to the Article
  1. ok got it working fully in ie-win 5-7beta 2.

    ie-mac has beat me. Maybe margin-left instead of left or display:inline-block in the container… I don’t know

    Anyone got any clues as to where the problem lies with ie-mac.

    Copy & paste the code below to embed this comment.
  2. My Holy Grail template has been updated. It’s now located on the main page of my site at http://www.macnimble.com

    Thanks.
    Bill Brown

    Copy & paste the code below to embed this comment.
  3. Great template had fun with it thanks ;]
    Here’s a little update anyways, turned out using certain javascripts (flyoutmenu’s) I had the flicker problem and fixed it by reversing the IE hack (left, right, properties for left column switched), making only every non IE browser recieve a new position for left column (using child selectors). My left and right columns weigh in both at 200px so no clue which value is why and for what (for now).

    div#left {
    left: 200px;
    }
    body > div#left {
    left: -200px;
    }

    Fixed the flicker for me, no clue what else it might have done but I’m liking it, worked for, FireFox 1.5 n’ IE 6. CSS Validates nicely too.

    Copy & paste the code below to embed this comment.
  4. I have added an appendix to the original One True Layout article, “detailing the anchor problem and suggesting some workarounds”:http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems .

    Copy & paste the code below to embed this comment.
  5. I normally use Firefox, but noticed that, in Safari 1.0.3, the left sidebar was replaced by white space and was re-positioned inside the main content div.  Anyone else experienced this problem?  I expect that it’d work in Safari 2.x…

    Copy & paste the code below to embed this comment.
  6. Totally breaks in IE6, the left column moves to the center of the page and overlaps on top of the center column, and the right column is gone completely, it totally disappears, just header, footer, and center column with left column on top of it.

    Works perfect in Firefox 1.5

    I got excited when you said it worked in all browsers, but now I am very frustrated cause if it doesn’t work 100% in all browsers it is useless to me unfortunately :mad:

    Copy & paste the code below to embed this comment.
  7. im totally new to CSS. i wonder why if i applly background color to each “div” wont work in Firefox 1.5, while its look nice in IE.

    any idea guyz?

    Copy & paste the code below to embed this comment.
  8. I’m a webdesigner that always used table-layout for website structures. I wanted to do this, as a lot of you, fully with div’s and css.

    I’ve implemented the holy grail, but found it incomplete because of the disappearing left column. I’ve read some solutions, but didn’t work for me. For now it’s back to table structures for 3 column sites.

    I will keep in touch with this queste and encourage it. Saying that table layout is easier and better (for now) is the same as “standing still in time”. Moving forward is the key to success!

    Copy & paste the code below to embed this comment.
  9. <table width=“140” border=“0” align=“center” cellpadding=“0” cellspacing=“0”>
      <tr bgcolor=”#CCCCCC”  = ‘#ACCDE6’;”  = ‘#cccccc’;”>
    <td width=“5” bgcolor=”#599CCE” id=“L1”>../testingMenuICAC/images/spacer.gif</td>
    <td width=“8”> </td>
    <td>Test</td>
      </tr>

    </table>

    Copy & paste the code below to embed this comment.
  10. Jon G said, “ok got it working fully in ie-win 5-7beta 2.”…

    Jon G, would you share how you got it working in ie-win? Do you have an example to share? You’re help is appreciated. Thanks!

    Copy & paste the code below to embed this comment.
  11. I dedided to make a wordpress theme out of this. Simple, text only. “Check it out”:http://www.isulong-seoph.net . It took me at day and a half to perfect. Thanks for this!

     

    Copy & paste the code below to embed this comment.
  12. I’m implementing this layout for a site at www.loveyourbusiness.com.  It works fine in decent browsers, but putting a background image on the left hand column makes the left hand column stop floating to the left (as far as I can tell) in IE6. I’ve never seen this before. An otherwise fine idea just isn’t working in implementation. The abberation seems to vary from page to page, even though the pages seems to validate OK

    Copy & paste the code below to embed this comment.
  13. I would like to use this layout keeping the right and left columns fixed but giving a scroll bar to the center column.  However, my experiments in this direction have come to naught (so far.)  Any ideas?

    Copy & paste the code below to embed this comment.
  14. Here’s another 3 column layout I’ve found to be useful.
    http://www.pixy.cz/blogg/clanky/css-3col-layout/
    I didn’t see it mentioned here, but if it has I apologize.

    While not presented nearly as nice as on ALA, this technique accomplishes essentially the same thing but without using browser hacks for IE and collapses a little more gracefully in older browsers.

    Great article though!

    Copy & paste the code below to embed this comment.
  15. Nice implementation; unfortunately, when I placed a styled DIV inside of the content area (not too crazily formatted either…just a little padding nudge and a bg color) it freaked in IE6 (the background color disappeared; only reappeared when I highlighted the text). Not that I should be surprised, but still…total compatability is FAR more important than css coolness. If I can do it in a table and it works everywhere, what solution do you think I’m going to give my clients?

    Client: It looks great, but doesn’t work in Internet Explorer.

    Me: That doesn’t matter. The CSS is l33t!

    Client: You’re fired.

    Nice arty, though.

    Copy & paste the code below to embed this comment.
  16. I’m trying to implement this and as soon as I get through Step #2, my columns are no long inside my container div. Can anyone advise?

    Copy & paste the code below to embed this comment.
  17. I’m having trouble getting Server Side Includes to work within the divs.  While a nice idea, this is simply not backwards compatable enough.

    Copy & paste the code below to embed this comment.
  18. Just had to say, I havn’t experienced any problems using this technique in Opera. I have worked on a couple web projects since I first read this back near the beginning of the year. While I’ve experienced some oddities in IE (expected) and Firefox (sadly, expected more often nowadays :(  ), Opera works with the design perfectly. Heres to hoping Firefox 2.0 and IE 7.0 are released with the same level of quality standards compliance. :)

    Many thanks for the technique. I’ve never registered here before, but I needed to review the CSS for another web project, and I had to throw in my two coppers (or is it zincs these days? …meh, cheap money).

    Copy & paste the code below to embed this comment.
  19. The columns strech way out beyond the footer. Does anyone have a fix for this? You can see for yourself on my website (sorry for the mess it’s in, but it’s far from finished) http://www.biologicalcell.com

    Copy & paste the code below to embed this comment.
  20. I am fairly disappointed with this article, first of all it claims to work on all browsers which it doesn’t. Namely Internet Explorer, while we all know this is the normal story, it remains the must important factor.

    I am aware that when this article was created it probably did work, but the editors should either keep their stuff up-to-date or remove any out-of-date articles that will just confuse people in the future. Like me.

    As someone said already, it might be l337 code, but to the client that means nothing. I hope there is a new solution that ALA can provide. I am still hoping to make the move to completely css based layouts, but so far, it just feels way too clunky. A simple 3 column based layout in tables feels like an amazing feat or discovery.

    Copy & paste the code below to embed this comment.
  21. For Equal-height columns and IE5.x boxmodel bug :

    #container { … overflow: hidden;}
    #container .column { … padding-bottom: 30000px; margin-bottom: -30000px; }
    * html #container { float: left; position: relative; }
    * html #sidebar1 {
      left: -200px;  /* ie5 bug fix */
      lef\t: 150px; /* ie6 bug fix */
    }
    * html #sidebar2 { display: inline; /* helped by float: left for container fix a ie5.01 box model bug */ }
     
    Works fine in : IE/win 5.01 5.5 6, Firefox/win 1.5 1.0, Safari 2.0 1.2 1.3, Firefox/linux 1.0.x* 1.5, Opera/win 9, Opera/linux 9, Opera/Mac 9, Konqueror 3.4
    Fails: IE7, Firefox 1.07 (Fedora), Mozilla 1.7 (Fedora), Opera 8.5 (Mac).

    Tested with browsercam.com and browsershots.org in 800X600

    Copy & paste the code below to embed this comment.
  22. …or does this not work as expected?  Looking at the given example from Firefox 1.5 (on both Windows and Linux), it doesn’t look like it should (as stated in the article).  I’m a bit disappointed; I thought I might have finally found it.

    Copy & paste the code below to embed this comment.
  23. Thanks for the article! I thought I was doing well until I tested it in IE6 on my partners laptop. I don’t have IE6 at the moment as I installed IE7 beta2 and can’t seem to get rid of it!!?)

    Pity… Anyway, look forward to seeing an update on this in the cough near future.

    Copy & paste the code below to embed this comment.
  24. I have been trying to find a good, across-the-board solution to the three column of equal height issue that doesn’t involve resorting to tables.  I really thought that I had found it with this one.

    With the basic coding done the layout looked great in Firefox with no real problems associated with screen size and I only needed to make a small adjustment to get the left column to comply in IE5 at 1400 × 900. The left column moves all over the place with different resolutions.

    Once I started to customize the layout with background images in each column though, the left column completely vanished in IE no matter what the screen resolution was unless I added additional nested divs to hold the background images.

    I hate to admit it but it’s back to tables for my three column layouts until I can actually find something that really works!

    Copy & paste the code below to embed this comment.
  25. i’ve been trying to make a holy grail of my own, thought to search for one on the web and thought this was it until i saw 20+ pages of comments and complaints.

    i wish, really i do, that layers-only accessible design is feasible. 

    for personal sites and sites for friends i’ll use them but until we fix the problem of browser compliance i’m going to use tables for my clients.

    Copy & paste the code below to embed this comment.
  26. If the right column is short, the footer will jump and place itself below the right column when resizing the browser window vertically or (more probable) diagonally in IE 6 Win.

    The problem is solved by adding clear:both; to the IE footer fix in * HTML #footer-wrapper.

    With this problem fixed, the only remaining flaw I can see with the layout is the scrolling problems when linking to named anchors within the text (see “Position Is Everything”:http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems for a discussion and half fix. Unfortunately this is not enough for serious use. We can (almost) never guarantee the absence of named anchors in real life.

    So, the quest for the holy grail now has boiled down to provide equal heights columns without causing any serious problems.

    BTW: I define equal heights columns as providing 3 or more columns where all columns:

    • appear to have a common length (usually to the footer)
    • can be individually colored in CSS (not with background images)
    • can have individual and positioned background images
    • can have individiual borders

    Copy & paste the code below to embed this comment.
  27. I’ve been trying to design a 3 column layout, however i’m a beginner, and can’t seem to get this one to work

    example (http://www.nkmediagroup.com/layout.jpg)

    I’ve tried designing it in different ways, but it always seems to overflow into some areas. I was wondering if I could get a hand with this one.

    thanks in advance!

    Copy & paste the code below to embed this comment.
  28. Too much bugs for a Holy Grail.

    Copy & paste the code below to embed this comment.
  29. Hi all people,

    Thanks Mat for your article for us and for the rest of us too! ;-)

    Landed here where looking for improvements to apply on future web deployments, and then read all (true!) this discussion (and some external links) to finish here: my first post same as Bill Brown did in 166… and, go at topic at last:

    There’s something not right about bill brown’s holy…?
    http://www.macnimble.com/
    Did not anyone notice that? at firt look seems to be good contribution in our infinite search :-)

    Copy & paste the code below to embed this comment.
  30. I implemented the Holy Grail on a site recently and have run into the disappearing content issue when linking to #ids.  Is there still no solution for this?

    Copy & paste the code below to embed this comment.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. @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.
  38. 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.
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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.
  50. 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.
  51. 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.
  52. 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.
  53. 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.
  54. 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.
  55. 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.