Comments on In Search of the Holy Grail

by Matthew Levine

225 Reader Comments

Back to the Article
  1. While completely obvious, I never thought of applying the padding to the body. Also, it’s almost shocking that most of it works in IE. Excellent article.

    Copy & paste the code below to embed this comment.
  2. My favourite thing about this padding + negative margins approach is how agnostic it is toward the overall width controller.

    So long as column widths are expressed as fixed or percentage, you’re totally free to throw any wrapper around it: fixed, percentage, elastic, jello, whatever. I had a great moment recently with a little site, where the client suddenly changed their mind and wanted liquid instead of fixed… it was about two minutes to change it up for them.

    Copy & paste the code below to embed this comment.
  3. This is a great article, thx!  A couple of questions though…

    First, in your examples I’m seeing odd word spacing in the left and right columns..never too little space between words but often far too much.

    Second, if I resize the browser I can actually get the left column to disappear depending on when I stop resizing…it flickers alot during the resize too (vertically only!).

    Any thoughts?

    Thx,
    Mike

    Copy & paste the code below to embed this comment.
  4. An excellent technique, thank you for sharing it.

    I was quite appalled, however, that an article published at ALA would promote the outdated practice of sizing with px units. If the author’s examples had used em units for the column widths, it might have resulted in a sensible layout on “very high resolution monitors”:http://froogle.google.com/froogle?q=toshiba portege m200 like the one I am using.

    Copy & paste the code below to embed this comment.
  5. The simple CSS seems to be too good to be true. I intend to use this technique for my blog as soon as I get some time to rework the design. Thanks.

    Copy & paste the code below to embed this comment.
  6. In IE Win, the left column completely disappears when I resize the *height* of the browser window using the bottom border of the window. Similar to the “flicker” that Michael Dennis talked about. No problem is Firefox.

    Copy & paste the code below to embed this comment.
  7. Very nice article!
    The margin-padding trick is new for me. Nicely done. Although some weird behavior of columns in some browsers when scaling viewport to less then 800px. Firefox will float-drop the right column and in MSIE6 the left column will move to the right…

    Copy & paste the code below to embed this comment.
  8. Great technique!

    Slight problem in Firefox (1.5) when you horizontally resize (width) the padding version, if you go to small the top of the right column moves down to the top of the left column.

    Copy & paste the code below to embed this comment.
  9. bq.??Slight problem in Firefox (1.5) when you horizontally resize (width) the padding version, if you go to small the top of the right column moves down to the top of the left column.??

    that was mean’t to be bottom of the left column. try it and see.

    Copy & paste the code below to embed this comment.
  10. technical stuff, at long last.
    welcome back ALA.

    Copy & paste the code below to embed this comment.
  11. I wrote a similar article one month ago, you can find it at http://www.blextar.net/index.php?post=47 . It’s still easy and requires just the box-model and Holly hack, but it involves absolutely positioning.

    The idea was originally from the book “Css Hacks&Filters;”.

    Copy & paste the code below to embed this comment.
  12. I love ALA and all these great css discussions. This code is excellent and very clever… as long as it’s viewed in the latest browsers. Shove it into IE5 and it’s worse than useless.

    I’m really in two minds about all this. You guys are quite right to be exploring the limits and capabilities of css but it’s all academic until you can come up with something that really is bullet proof in all browsers. It’s lovely for us with our up-to-the-minute browsers but many people still use the old technologies and sometimes I think you forget that.

    So out in the real world we’re stuck with having to use tables for structure and css for typesetting! Or ignoring the older browsers, which I don’t think is good enough.

    btw mike - the wild word spacing is what happens when you specify justifed type. Nasty, innit?

    Copy & paste the code below to embed this comment.
  13. Great article, as much as i agree that CSS has a little way yet before this type of layout is solid enough for everyday use, (CSS 3.0 looks promising, but only if browser support takes up the slack) i still think these bounderies still need pushing to help further the development and wider spread use of more usable CSS.

    I just love the minimalised approach of this layout. Definatly added to my resource archive ;)

    Copy & paste the code below to embed this comment.
  14. Nice article, but as Harry has said, I think it should have some kind of fallback built in for IE5, and also IE5 on the Mac - even if it was just a message that only these browser could see advising to upgrade to a decent browser!?

    Without this it’s a bit of a stretch to call it the Holy Grail, although it is close!

    Copy & paste the code below to embed this comment.
  15. I can do the same with tables !

    Copy & paste the code below to embed this comment.
  16. Have you even tested this technique in IE5 or IE5.5??

    Your layout completely falls apart.
    I haven’t tested IE 5.3 on Mac but i bet it falls too.

    I have a CSS 3 col layout which DOES work in IE 5, IE5.5, IE5 on Mac, Firefox v1.0 +,  Netscape 7+, Opera, the list goes on.

    According to my browser stats A LOT are still using IE5, we still need to support some old browsers.

    Needs some more work I’m afraid.

    Copy & paste the code below to embed this comment.
  17. To be fair if you read the article it does say “The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.”

    Copy & paste the code below to embed this comment.
  18. There’s too much complaining going on here. Levine’s Holy Grail version is great, and it does (gasp!) work in newer versions of IE. W3Schools is showing only about 5% of users are still on IE5, and since that percentage is declining at about $5 every year, I’m sure they can deal.

    Great article and great layout.

    Copy & paste the code below to embed this comment.
  19. I can post a screenshot if needed..

    Copy & paste the code below to embed this comment.
  20. This is a great layout.  I’ve been working on one that works very well in all browsers, but there are a lot of tags in it.  I love the simplicity of this.  Anyway, I thought you would like to know that macIE moves the left column to the right about 1/8 of the screen.  I tried some quick work arounds for it, but nothing worked.  I’ll work on the layout when I get some time and see what can be done to improve compatibility.

    Copy & paste the code below to embed this comment.
  21. It doesn’t work worth beans in Netscape 3.

    You so-called “bleeding edge” developers seem to forget that some people use Netscape 3. Well, anyway, they used to.

    I can achieve the same effect by making a comp in Photoshop and posting it as a GIF.

    Copy & paste the code below to embed this comment.
  22. Personally I quite like this method, it worked well for me in Firefox 1.5 and below, but the right column seems to disappear in IE and also in Opera v8.51 the padding went a bit off, nothing that a little fiddling about with cant heal, great article
    Cheers.

    Copy & paste the code below to embed this comment.
  23. That’s great, finally a REALLY simple solution that works perfectly. I’ve been thinking of redesign my site, I may well use a liquid layout now that there’s such a clean and flexible solution.

    Copy & paste the code below to embed this comment.
  24. Was what I sadly thought when I saw it in IE6.

    When you collapse the size of the page, the left column slides to the center of the page. Also when in windowed mode and you increase the size of the window to the side edges of your monitor, the left column disappears.

    Copy & paste the code below to embed this comment.
  25. Well, perhaps not “perfectly”, but pretty good all the same.

    Copy & paste the code below to embed this comment.
  26. @Michael Ennis:

    The strange word spacing from text-align: justify; Not normally recommended for the web, but I used it to give a stronger sense of where the padding was.

    Haven’t been able to reproduce the flicker or the disappearing columns. Perhaps you can send some browser info my way?

    @Dan C:

    I agree that ems are a better choice in most situations. In others—when you need a column for 120px-wide banner ads, for instance—pixels are a better choice. As I noted in the article, it’s just as easy to use either.

    Copy & paste the code below to embed this comment.
  27. I think the Holy Grail should include a version that centre’s the layout on the page in a fixed width, not 100% of the page.

    Something like…

    body {
       min-width: 700px;     /* 2x (LC fullwidth + */
       text-align: center;     /* CC padding) + RC fullwidth */
       margin-left:10%;
       margin-right: 10%;
    }

    ...works but I’m not sure of the drawbacks (aside from shrinking the page and keeping the right margin bigger than the left when the min-width is reached).

    Copy & paste the code below to embed this comment.
  28. The final version in IE has some extra space at the bottom, where as Firefox does not.  Is there a way to remove that from IE?  For some reason this has annoyed me to no end!

    Copy & paste the code below to embed this comment.
  29. body {
    min-width: 700px;
    text-align: center;
    margin-left:10%;
    margin-right: 10%;
    }

    Copy & paste the code below to embed this comment.
  30. When it doesn’t work for all normally used browsers and requires a browser hack for IE, I think that calling it the “Holy Grail” of three-column layouts goes too far. Speaking of which, I’d bet that this doesn’t quite work in IE7 since they ditched the star hack. So probably not even future-proof (working remotely today or I’d check it).

    Not to mention saying that the three-div solution doesn’t have a wrapper really doesn’t ring true: you use the body as the wrapper…

    So…definitely a technique worth documenting and bookmarking! It resizes quite nicely in modern browsers. But also definitely a technique that will go onto the list of “almost there” three-column layouts on css-discuss.

    Copy & paste the code below to embed this comment.
  31. Can you change this in the article:

    “Step 1: Create the frame”

    That raised red flags and caused me to shudder momentarily.  Then I realized you didn’t mean ‘Frames’.

    Copy & paste the code below to embed this comment.
  32. It looks to me as though padding is needed on the right side of the 3rd column (much like the left side of the 1st column). Maybe others have brought this up.

    Copy & paste the code below to embed this comment.
  33. By changing the TEXT-ALIGN to left (because that is my preference) the “flicker” problem degrades into a disappearing problem for the left column.  Resizing vertically causes the column to vanish until resized horizontally.  Work this detail out for IE, and I’m all in…  I messed with it for about 30 minutes and could make no improvement.

    Copy & paste the code below to embed this comment.
  34. I’m still waiting for a holy grail that also has full-height columns and allows me to control the source order of ALL 3 columns (and does everything else this solution does, too).

    Copy & paste the code below to embed this comment.
  35. Thanks for posting a tutorial with lots of clear visual examples. I wish all CSS guides were as pretty. Too often tutorials leave you coding blind.

    Copy & paste the code below to embed this comment.
  36. Art director Jason Santa Maria created the illustrations in mental collaboration with author Matthew Levine.

    bq. Thanks for posting a tutorial with lots of clear visual examples. I wish all CSS guides were as pretty. Too often tutorials leave you coding blind.

    Copy & paste the code below to embed this comment.
  37. bq. I’m still waiting for a holy grail that also has full-height columns and allows me to control the source order of ALL 3 columns (and does everything else this solution does, too).

    While generalized source order was a bit beyond the scope of the article, it wouldn’t be too hard to modify this technique to get it. If you wanted the right column first, for instance, you’d need to offset the center column with a negative margin.

    The method for creating full-height columns is described in the article.

    Copy & paste the code below to embed this comment.
  38. Simple, sweet, concise, and I’ve been beating the stuffing out of it on different browers, trying to mess it up with incorrectly sized photos - and it hangs in there. Great article, keep up the good work, email me if you are ever looking for a job!

    Copy & paste the code below to embed this comment.
  39. Cool, but not solid enough for me to be comfortable putting it to use.  I advoid the negative margin positioning trick simply because it can cause elements to move off the screen.  You can counter with a min-width, but not in IE.  The chances of someone viewing the site in such a tiny browser window are slim, but non-zero, and that’s enough for me to avoid the technique.  The disappearing left column thing is odd too, not sure if it’s related to the negative margins though.

    In a perfect world we wouldn’t have to worry about such IE spawned strangeness.  I for one will not be holding my breath waiting for this perfect world to come about.

    RE Comment #4: I’m sure px were used as a quick and dirty way to get the example out there, just like the non-semanitic IDs.  You want ems, you use ems.

    RE Comment #15:  =)

    RE Comment # 18: The figures published by W3Schools come from their server logs.  Those figures are not a realistic sample of the web surfing public.

    RE Comment #21: I think the line has to be drawn somewhere.  I belive that was your point.

    RE Comment #35: I agree, the presentation of this article was excellent.

    Copy & paste the code below to embed this comment.
  40. Personally, I find a three column layout like this less appealing than two column layouts that are centered with a fixed width. I haven’t seen much in terms of corporate sites that use this approach for their layout. Could you give some examples?

    What’s particularly vexing in the example is how things are mashed up to the edges of the fixed areas and how the content will change in the center section. Imagine users who are displaying web pages on a wide-screen monitor.

    Copy & paste the code below to embed this comment.
  41. It’s so simple that you would think every CSS-coder on Earth would have thought of it. Good article. ALA just keeps on packing in the great articles.

    Copy & paste the code below to embed this comment.
  42. With IE6 (6.0.2800.1106) I also get the left column vanishing problem when resizing vertically until I resize it horizontally. Even more, if I try to reduce the window beyond 550 horizontal pixels, instead of getting a horizontal scrollbar, the left column overlaps the central one. So even as I’m currently adressing modern browsers with my site, I think it’ll be using my homemade bullet-proof ugly solution (a table for the 3 columns, and CSS for all the rest) for some time more.

    Copy & paste the code below to embed this comment.
  43. I’m betting the disappearing or flickering left column is actually the peekaboo bug or something very similar. You can read more about it here: http://www.positioniseverything.net/explorer/peekaboo.html

    The Holly Hack, as below edited for this style sheet, may fix it. I couldn’t get a CRLF in when adding this text. Add one at the * html below:
    /* Hides from IE5-mac \*/ * html .column {height: 1%;}
    /* End hide from IE5-mac */

    Copy & paste the code below to embed this comment.
  44. I agree with Sergi de Pablos: “So even as I’m currently adressing modern browsers with my site, I think it’ll be using my homemade bullet-proof ugly solution (a table for the 3 columns, and CSS for all the rest) for some time more.”
    Meanwhile i bookmarked this article because nothing is better than these kind of articles to learn more about the ‘inner secrets’ of CSS.

    Copy & paste the code below to embed this comment.
  45. It has been my experience that there is no magic silver bullet for markup utopia.  That Idea sir is a myth and to seek it folly. An interesting article but i’ll stick with my negitive margins. If one person uses extra divs in one method and other person uses exta divs in their method… ads up to one hill of beans.

    Copy & paste the code below to embed this comment.
  46. Maybe not the most popular browsers around, but still. Opera 7 only shows the header and the footer. The scrollbar gives the impression that the three columns are sitting somewhere deep down, but no, no sign of the three cols.
    In NN 7, also only the header and footer, no sign of the three cols.

    Copy & paste the code below to embed this comment.
  47. The right column dropping down in Firefox can be cured if min-width is increased by 1px to 631px - may cause other problems?

    In my view this Holy Grail is no such thing until the left column is fixed in IE 6 (not that I use IE 6!).

    Copy & paste the code below to embed this comment.
  48. I’ve been studying CSS page layout for several months now and I’m am pretty much onboard with most everything even the zealots argue using CSS for. However, in the case of columns, although the technique presented here is the best I’ve seen, what does it buy over simply using a three-column, two-row table (where the second row colspan’s the three columns for the footer. This table would be positioned from the top of the screen (so that no other tables are required for header mark up).

    Using a table doesn’t require the fiddly arithmetic that CSS does (shouldn’t CSS support some sort of variable declaration someday?), it works in all browsers, and provides far reduced coupling with disparate pieces than the CSS method does.

    Help me get it! Thank you very much.
    rp

    Copy & paste the code below to embed this comment.
  49. There is still one problem with this layout, the content has to push the footer to the bottom of the broser window.  If you take out all the dummy text, footer just comes up to the upper third of the browser window.

    Until such a layout lays the footer at the bottom of the browser window when there is no or little content, there is no holy grail found, without hacks and other high maitenance methods.

    Copy & paste the code below to embed this comment.
  50. Forgive me if I am misunderstanding something, but doesn’t this have the potential to break in IE7, due to the use of * html?

    Copy & paste the code below to embed this comment.
  51. Yes, negative margin values are offensive.

    Copy & paste the code below to embed this comment.
  52. I enjoyed the article however I too am getting the left column disappearing with the vertical resizing.
    version:6.0.2900.2180.xpsp_sp2_gdr.050301-1519

    Copy & paste the code below to embed this comment.
  53. A Grail?

    The Grail is many things to many people and if your quest for it is at an end with this layout that’s fine, but “it’s not really (Screenshot of Firefox 1.5 on Win XP) “:http://www.treetrybe.com/imm/images/ss-graal-1.gif “robust, is it (Screenshot of Internet Explorer 6 on Win XP) “:http://www.treetrybe.com/imm/images/ss-graal-2.gif ?

    Copy & paste the code below to embed this comment.
  54. The earlier commenter who thought that the *HTML hack would cause problems in IE 7 appears to be correct. The final render looks pretty ugly on the newly released public beta of IE 7. The left column does not appear until the browser window is resized; then it floats over the center column. Screenshot at

    http://tinyurl.com/btazn

    Copy & paste the code below to embed this comment.
  55. Are we still endorsing the star hack? Considering IE7 and it’s impending release, conditonal comments are the choice of professionals and grail seekers for delivering styles to IE.

    Copy & paste the code below to embed this comment.
  56. Urgh, such a shame about IE6 at narrow window sizes. You’ve got two problems: 1) losing the right-column completely - no scroll bar, no nothing (maybe OK it the content isn’t essential?) 2) the left column going on the march and overlapping the center.

    The left-column thing is simple to diagnose but a bastard to treat. The left-column’s left-margin is proportional to the width of the container. As the container shrinks, so does the left-column’s margin. The center column has visually stopped shrinking because it’s hit the limit of its longest word (“content” from the header) so it can look like the container isn’t still shrinking. But it is.

    For browsers which get min-width that’s the treatment, which has been thrown in anyway to fix problems with narrow windows in Firefox et al. At this point the article says “With IE6 this doesn’t happen”. In fact, IE6 breaks differently, but it still breaks.

    An IE6 min-width patch is needed. width:expression should work, but crashed IE every time I tried it and “Andy Budd’s fix”:http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/index.php didn’t work for me. Plus it’ll only work with JS enabled. I haven’t tried the CSS+extra <div> workarounds yet.

    I’ve spent a bit of time hacking around with this and looking at “other”:http://positioniseverything.net/articles/onetruelayout/appendix/holygrail   “solutions”:http://meyerweb.com/eric/thoughts/2005/11/09/multi-unit-any-order-columns/ . Big John’s technique has the same problem when the liquid column is in the middle - not surprising as it’s the same principles as are used here. Eric’s isn’t a full-width layout and also loses the right-column with no scroll bar to bring it back.

    ps (no really, I’ll shut up in a second) Re the magic-disappearing-box trick, I’ve seen it before and rarely managed to fix it completely (if anyone has, please share!). If this was the only IE issue, I’d take the risk as it only occurs in very specific circumstances. How many web users really sit there actively resizing their browser, every page?

    pps For those tempted to chuck in the towel and dig out a table. There are decent 3 column CSS solutions out there which, if not the Holy Grail, are still less of a compromise than using tables. Coded carefully - OK, with a few extra divs littered about which you may want to strip out someday when we get this nailed - you’ll be able to make design and layout changes more quickly and easily in future than you will with your layout locked down in a table.

    ppps - just kidding..

    Copy & paste the code below to embed this comment.
  57. In the persuit of full column backgrounds—without the need to use a “faux”:http://www.alistapart.com/articles/fauxcolumns/ technique— “One True Layout”:http://positioniseverything.net/articles/onetruelayout/ was given a spin.

    One True Layout worked great until it was found that linking to a page anchor in the content divs of a column caused the content above the page anchor to be hidden in IE6 (PC) and FF (Mac and PC). Safari doesn’t have this issue.

    Here’s an example of “Holy Grail w/ hidden content issues”:http://www.strangecode.com/labs/css/holy_grail_hidden_content_issue

    If anyone has a peachy solution to this, I’m sure I won’t be the only happy camper. =)

    Copy & paste the code below to embed this comment.
  58. The issue I mentioned in “comment #58”:http://www.alistapart.com/comments/holygrail/?page=6#58 seems to only be present in FireFox on Mac and PC. IE6 seems to work fine.

    Copy & paste the code below to embed this comment.
  59. This article has fair whipped up a storm! A lot of negatives flying about but if this could somehow take us a step closer to achiever the holy grail then bring it on!

    Copy & paste the code below to embed this comment.
  60. bq. Forgive me if I am misunderstanding something, but doesn’t this have the potential to break in IE7, due to the use of ASTERISK html?

    It’s easy enough to avoid the use of ASTERISK html. In retrospect, I should have included this in the article:

    HASH left { left: 150px; /ASTERISK RC Width for IE 6 ASTERISK/ }

    HASH container > HASH left { right: 200px; /ASTERISK LC Width for everyone else ASTERISK/ }

    It’s my understanding that IE7 respects the child selector (”>”), so it should see the correct value. Whether it plays nice with negative margins and relative positioning is another issue entirely.

    _*Comment edited by Erin Kissane*: The Ruby port of Textile is a finicky beast. I’ve replaced your hash marks with HASH and your asterisks with ASTERISK. We hope for a better solution in the future. My apologies to all for the inconvenience._

    Copy & paste the code below to embed this comment.
  61. Hacks and fixes for hacks. Matthew, why do you prefer this method as opposed to conditonal comments?

    Copy & paste the code below to embed this comment.
  62. I noticed that for some reason when I copied the code verbatim it just wouldn’t work for me in IE, yet the example page provided worked just fine.  After some rooting around I discovered that it will only work in IE so long as you have the XHTML Strict doctype at the top, without it the code breaks.  You might want to put that in your required HTML :)

    Copy & paste the code below to embed this comment.
  63. This is a good article.  It shows that people are continuously experimenting, finding ways to achieve effects that were difficult, if not impossible, to manage before.  It’s progress!

    I wonder if this layout can be combined with the Resolution Dependant Layout from The Man in Blue.  It seems to me that if a browser window gets too narrow for the sidebars to remain in position, they could be displaced in a controlled fashion - above or below the content.  Just an idea…

    Copy & paste the code below to embed this comment.
  64. I love the idea of a fluid layout, but even this one has it’s drawbacks in. When you resize in IE or Firefox the columns go a little funny (disappearing, hovering over the top of each other).

    It also seems all these examples of “The Holy Grail” don’t include extensive styling and images as a real website would implement.

    Don’t get me wrong I think this is absolutely fantastic, but I think for now I’ll be a safe camper and stick to fixed width layouts. At least I can rely on people getting a pretty much the same visual experience.

    Copy & paste the code below to embed this comment.
  65. Very nicely put together Matthew. When I made a test site with this at work I had all the problems everyone else is discussing when viewing it locally. However at the end of the day I uploaded it to the server and viewed it from home and it works PERFECTLY. Nothing breaks at all. I will be investigation tomorow what specific version of each browser is. Here is a link if someone wants to take a look, http://www265.pair.com/ezell/Muncie Design/index.html

    Copy & paste the code below to embed this comment.
  66. This was a very good article and I really appreciate the clean markup.  It does highlight however the unintuitiveness of CSS.  I’ve been very frustrated working with divs and CSS, and seeing the loops the author had to do and the amount of effort that was required to achieve what should be a straightforward layout is maddening.

    Copy & paste the code below to embed this comment.
  67. Use of the Holly Hack (the star Hack) is now considered harmful.  The holy grail layout doesn’t work in IE7.

    And I agree that use of px units seems silly too. 

    I imagine it could be adapted for practical use without too much trouble though.

    Copy & paste the code below to embed this comment.
  68. In the second example, the one with no wrapper, the min width on the body is:

    min-width: 240px;  comment: LC fullwidth + CC padding

    But it looks like it has to be greater than LC + CC padding, to keep the right column from dropping. 250px works just fine.

    @ Scott Mackenzie: “attractive and liquid happen all the time”:http://www.cssliquid.com

    Copy & paste the code below to embed this comment.
  69. ‘It doesn’t work worth beans in Netscape 3.’

    Hey and i’ve just tried it on my Zx 80 and it’s all over the show.

    Copy & paste the code below to embed this comment.
  70. Well I think it is sound. Too many negative comments on here.

    We all wish every browser were the same but they are not. So lets just get on with it eh?

    I’ve been using css for about a year now and I’m still coming to terms with some of the stuff I see!

    I had previously used a three-column layout using % but as the articles says, it’s gets very fiddily with padding and such.

    This layout looks and works excellent considering the different browsers. There are a few bits I don’t fully understand but with the negative reaction on here, I’m afraid to ask about them!

    Copy & paste the code below to embed this comment.
  71. You heard of irony Tom?
    Just trying to send up the ‘it doesn’t work on netscape 3’ post but I have a feeling that was irony too.

    Personally I think it was a great article and it sums up what I like so much about web development. Someone posts a concept to the community. The community goes away, tests it, extends it et.c. People who want the perfect solution which they can just copy and paste are missing the point.

    Cue philosopohical misty eyed ramble:

    As in many quests, the journey there is often more important than the destination…

    Copy & paste the code below to embed this comment.
  72. Nice article, good idea. I think if it could be made to work in IE5x then it would be worth considering. I think it’s too early to dump support for those browsers.

    Re Post 66
    I noticed that the ‘right-hand column dropping’ problem didn’t happen at your site. Maybe having the google ads content prevented it.

    Re Post 72
    Saying “˜it doesn’t work on netscape 3’ isn’t being ironic. BUT, saying “You heard of irony Tom?” when no irony was involved is in itself, ironic.

    Copy & paste the code below to embed this comment.
  73. The comments about Netscape 3 - while making me laugh - do disguise a serious point. Anyone using NS3 with stylesheets enabled is probably someone who beats themselves with birch twigs for fun. If you use NS3, and there may be a good reason for doing so even ten years after it has been superseded, if you had any sense you would turn CSS off. Then the site works fine. Problem solved.

    I think it’s a good time to remind people of the need to specify _media=“screen"_ in the <style> tag to ensure that printers and small screen devices don’t try to make sense of it ... *this* is why CSS is better than tables.

    Copy & paste the code below to embed this comment.
  74. bq. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.

    p. ‘Browser support’ should be listed, isn’t? ;-)

    p. I believe a ‘minimalist’ approach may fail to reveal issues, I think it’s a good idea to create some sort of ‘real life’ example (including links etc.) as I do here: “3 columns CSS-P(great browser support)”:http://www.tjkdesign.com/articles/3cols/?add=right . IMO, this helps the reader to check the robustness of a layout in various browsers.

    p. *Great* article. Thanks or sharing.

    Copy & paste the code below to embed this comment.
  75. Is there any easy way for this to scroll the whole viewport when a large image is placed in the center? I can scroll just that column, but I would rather not. Right now the right menu overlaps the image.

    Copy & paste the code below to embed this comment.
  76. Reading this was exactly what I had hoped: a good exploration of another way to skin a cat. Sure, it’s got compatibility issues, but I don’t get the impression that the author was presenting this as the end-all, be-all code. After all, the title of the article begins with “In search of…”

    Unfortuantely, I do take issue with the end of the title. I don’t blame the author here, but rather the notion that the “holy grail” involves a particular layout, specifically one that is liquid.

    There’s nothing wrong with a fixed-width layout. Many usability experts continue to argue that it’s a more readable presentation than liquid, especially at larger screen sizes.

    We could debate for enternity about what is and isn’t a “holy grail” for developers devoted to standards. Nobody’s right or wrong.

    The last thing our industry needs is another pre-conceived notion of how a website should be laid out.

    Copy & paste the code below to embed this comment.
  77. Many thanks to the readers who pointed out that the left column would disappear when IE was resized vertically. I spent some time isolating and squashing the bug. You can see the solution (which, I’m happy to say, is just as clean as the original) here:

    http://www.infocraft.com/articles/the_case_of_the_disappearing_column/

    Interestingly, this whole problem could have been avoided if I had, as some readers suggested, just avoided the * html hack to begin with. Yet another reason to go with valid patches (or conditional comments).

    Copy & paste the code below to embed this comment.
  78. Okay I know that it is a hack and it’s not pretty, but it does work. You can add min-width to IE using an expression in your CSS. Check out “svendtofte.com - max-width in Internet Explorer”:http://www.svendtofte.com/code/max_width_in_ie/ . You will want to scroll to the bottom of the page and visit the “text box sat to a min width of 800 pixels”:http://www.svendtofte.com/code/max_width_in_ie/pixels_minwidth.html link.

    Maybe a purest can tell us how to use this and not invalidate the CSS or why this shouldn’t be used?

    Thank you Matthew for very nice article and wonderful illustrations. I noticed that you’ve provided a fix for the disapearing left column at “The Case of the Disappearing Column”:http://www.infocraft.com/articles/the_case_of_the_disappearing_column/ , can you update the A List Apart article?

    Copy & paste the code below to embed this comment.
  79. mozilla suite 1.7.12 has serious weirdness with example 3. 
    The columns sometimes go way long, with over a screen-height of blank space, but resizing horizontally makes it jump around, to where some cols can cut off text at the bottom.

    very odd.

    Copy & paste the code below to embed this comment.
  80. There is a major bug with the equal columns method featured in this article relating to links and target identifiers (eg.’#top’).

    If you link to another point in the same page your content will disappear.

    I have created a “demo page”:http://www.leevigraham.com/holy_grail_bug_example.html for everyone to see.

    Scroll to the bottom of the middle column and click the link that targets a paragrah in the middle of the center column.

    Copy & paste the code below to embed this comment.
  81. I do not believe no one tried to view the ‘holy grail’ on the current IE7 beta. That’s just a wonderfull mess. I wonder if IE7 will be like that eventually.

    Copy & paste the code below to embed this comment.
  82. bq. “I was quite appalled, however, that an article published at ALA would promote the outdated practice of sizing with px units.”

    bq. With all due respect, sir, if this is a surprise, you haven’t been paying attention. Next!

    bq. “This code is excellent and very clever”¦ as long as it’s viewed in the latest browsers.”

    bq. See, if we hadn’t presented the technique (and all the others that draw this comment) as something that works in modern browsers, this would be a valid point. But we did, as another commenter pointed out. It’s like ordering a veggie burger and then complaining that there’s no beef in your sandwich.

    bq. “Can you change this in the article: “Step 1: Create the frame”?”

    bq. Nope. Next!??

    A little patience with your readers, rather than dismissals, might be helpful.

    Copy & paste the code below to embed this comment.
  83. Matthew,

    Great to see a “fix”:http://www.alistapart.com/comments/holygrail?page=8#78 for the magic disappearing box.  Great article too (which I didn’t say before, sorry) and great work developing this technique.

    I have one small issue though: the “comment on your own site”:http://www.infocraft.com/articles/the_case_of_the_disappearing_column/ about narrow browsers. Anyone viewing at less than 400px wide has “problems far more serious” than not being able to read your web page? This is the slippery slope of inaccessibility. “Accessible to all” is a core principle of web standards at their best - which is what AListApart represents.

    (I’d argue this isn’t just about visitors with disabilities,  but if you want a disabled-access example a 400px wide window is not inconceivable for someone running a low screen resolution due to poor eyesight.)

    The IE problem is, unfortunately, a serious accessibility issue. On a small screen the main content disappears, obscured by the left column. It’s literally “inaccessible”. There’s no way to get at it. Not even a horizontal scrollbar.

    Given you fix the problems at narrow window sizes in Firefox I’m guessing you don’t really think small screens are someone else’s problem. I’m guessing you’re really thinking IE6 is someone else’s problem.

    You’d be right. It’s the browser that’s the problem, not your code. Who here doesn’t think that every time they test their site in IE?

    The answer, “as ever”:http://www.alistapart.com/articles/tohell , isn’t to leave your IE user to suffer an inaccessible website, but to feed their “bad browser” code it can render accessibly. Use conditional comments to feed IE a completely different stylesheet which won’t cause problems in narrow windows (perhaps a fixed-width version, or one which combines width:expression with a fallover for non-JavaScript visitors). You could even throw in a good, old-fashioned browser upgrade message if you like.

    This is a much better approach than saying “to hell with bad users”. Your site is still accessible to all. And you get to keep your brilliant technique where it belongs - with proper, modern, standards-compliant browsers.

     

    Copy & paste the code below to embed this comment.
  84. A couple thoughts, some relevant, some a little off the path:

    - Great article. I tend to design towards a liquid layout, unless the goal works better with a fixed-width. It just makes more sense to me to get the content up in view. Normally I go the tables with CSS formatting path, but have approached it with a CSS only plan occasionally. I always come away feeling it took far more time than it was worth. The simplicity of this approach gives me motivation to continue to at least give CSS pure layouts another chance.

    - I do, however, have to agree the Holy Grail tag is a bit premature. This method works in modern browsers, and by the comments here not in every case, with a hack, and not in at least one version of a new browser (IE7). In a real world application, I couldn’t justify that. Not really a Holy Grail, but a great step forward.

    - I also have to say I also don’t quite get the total aversion to tables. Yes, they are not intended for layout. But, well…they work. And replicating that in CSS nearly always seems to require hacks aplenty and/or much compromise.

    - I’m growing of the opinion that the biggest setback for CSS is, as always, that lack of stadardization and consistent support. Not all CSS works in all browsers consistently. Yet there is so much work being done to try and get the CSS tools available to do just that. While there should be people experimenting, trying to invent new approaches and new methods, it seems nearly impossible to achieve this Holy Grail, as the browsers, past and present, simply are not built to accomodate it - at least not without sixty extra lines of CSS to correct incompatibilities. With the browser consistency and support for CSS as it is now, I don’t think it’s unfair to say the reality is “You can do a 3 column liquid layout with pure CSS, but let’s be honest - you’re going to have to compromise on browser support and consistency, and you will have to include some work arounds. We have no Holy Grail yet, and quite frankly, we may never find it until CSS support improves.”

    Copy & paste the code below to embed this comment.
  85. Just confirming with another post that the left column disappears and/or flickers on resize in Win IE6. This isn’t a small bug. Its blocking use.

    Copy & paste the code below to embed this comment.
  86. Hi-

    I used a very similar layout (based on Alex Robinson’s original article ‘In search of the One True Layout’) and ran into an issue where clicking on fragment links caused the content to partially disappear.

    I think the key issue is this rule:

    #container {
    overflow: hidden;
    }

    In every browser except Safari, following a fragement link to the page or a fragment link within the page (ie href=”#idNearBottomOfPageInsideContainer”) causes the #container to scroll as if it were set to ‘overflow: auto’, except w/o the scroll bars.

    To the user, this looks all of the content of the page (above the targeted id) disappearing.  Has anyone else run into this, have a work-around, or suggestion?

    Great article!

    Copy & paste the code below to embed this comment.
  87. Leevi Graham:  I missed your comment - I am posting the same issue.
    I can verify that your sample page *does* work in Safari, but hides content in Firefox (1.5).  I believe the content is hidden in IE 6.

    For Firefox, I found this bug listing:
    https://bugzilla.mozilla.org/show_bug.cgi?id=259615

    I also found someone else who seems to have the same issue with the OneTrueLayout:
    http://www.mortusoculus.com/2005/12/03/bah

    Sorry for the duplicate post.  Any solutions floating out there??

    Copy & paste the code below to embed this comment.
  88. Try using very thick borders on the side of #container, rather than padding, to reserve space for the side columns. Then use the borders as background colors for the 3 columns. That way it will appear all 3 columns are of equal height (when in fact each column’s DIV is a separate height). That way you don’t have to use that horrible hack to get the columns to equal height and you can use the padding value on #container to create padding on columns and perhaps include a border on the center column to allow further visual separation of the 3 content areas.

    See “this layout”:http://webhost.bridgew.edu/etribou/layouts/skidoo/ that I put together a couple years ago as an example.

    I appreciate the attempt to cut down on markup. Not a lot of people seem to care about such things.

    Copy & paste the code below to embed this comment.
  89. I seem to have been out of this loop and soldiering on solo. If you have the time I would appreciate feedback on a rather less elegant solution…

    http://staffweb.cms.gre.ac.uk/~mk05/web/XHTML/CSS/threeCol.html

    This is still work in progress and part of material at…
    http://staffweb.cms.gre.ac.uk/~mk05/web/XHTML/

    Copy & paste the code below to embed this comment.
  90. I’m also experiencing the disappearing content when clicking fragment links. In my implementation, there is an imagemap which, when areas are clicked, leads to disappearing content exactly as you described it, Eric Everman & Levi. However, I am not experiencing problems with it in IE6 or Opera 9. Only in Firefox 1.5.0.1

    Here’s my site: http://crimson.host.sk/about.html

    A lot of the font/colors are inspired by alistapart.com currently. I’m trying to fix this issue before I customize it to my liking. *blush* Of course, removing the overflow and the margin/padding stuff from #container .column fixes the breakage, but results in uneven columns. I’d also like some ideas for a fix. Otherwise I really love this method and its simplicity.

    Copy & paste the code below to embed this comment.
  91. Great timing Matthew. I have a site I need to adjust that deals with this very issue, although its a two-column layout instead of a three-column layout. I’m assuming it should work the same without the right-side column. I tried coding the two div tags (left column and center) step-by-step and can’t get the left column to float. I still ends up underneath the center. If you can, could you please e-mail me at info [at] whiteboxerdesign.com so we can interact directly?

    Copy & paste the code below to embed this comment.
  92. First off I must apologise for not having managed to update the One True Layout article with this info since I’ve been aware of the issue since late November. Why I haven’t is a long story that is irrelevant to this forum, except to say that I have been trying to get to the bottom of a) working around the problem and b) whether the problem is in the “equal height” technique or in Mozilla and IE’s implementation. An update on all this will appear very soon, but the short version is, the behaviour is fixable in IE but not in Mozilla (though, please if anyone can prove me wrong, let me know).

    I had hoped to get away with slipping it out before too many people noticed - but no chance of that in the wake of this most excellent article.

    Copy & paste the code below to embed this comment.
  93. Hi.  I can’t get this to work out guys…  Here is a link to my page:
    http://www.macintoshclub.com/developerlink/template.html

    Any ideas on how to fix it?

    axel

    Copy & paste the code below to embed this comment.
  94. Great article with fits my needs :-)

    But there´s one thing more: I´d like to add a wrapper centering the page and giving it a width in em, e.g. 55em. No problem in moz and fox but when nesting the tutorial’s code in an additional div completely hides left column in IE6. Didn’t even dare to try in IE5.5 ... But is there any hack to get left column back? Where has it gone?

    Copy & paste the code below to embed this comment.
  95. bq. But there´s one thing more: I´d like to add a wrapper centering the page and giving it a width in em, e.g. 55em. No problem in moz and fox but when nesting the tutorial’s code in an additional div completely hides left column in IE6.

    Lars,

    You might want to consider giving the body a defined em-width and margin: 0 auto; rather than adding a wrapper. The body and html tags are fantastic (and often overlooked) layout tools: you’ve already got them in your markup, so might as well take advantage of them.

    As for the disappearing left-column, take a look at “my update”:http://www.infocraft.com/articles/the_case_of_the_disappearing_column/ and see if that solves your problem. If not, it’s hard to say what the problem is without seeing the actual code.

    Good luck!

    Copy & paste the code below to embed this comment.
  96. Matthew, Your infocraft.com site linked above has a bug in IE6 whereby the ‘Recent Projects’ label stays in position when the window is resized?

    Copy & paste the code below to embed this comment.
  97. As a novice user of CSS I found the excellent “website”:http://www.tjkdesign.com/articles/3cols.asp by Thierry Koblentz (Post 75) very useful. Good 3 column examples that seem to work along with clear explanations of the code.

    Copy & paste the code below to embed this comment.
  98. Is there a solution that works with everyones favorite Mac browser?

    Great article but every example was displayed improperly by I.E. on my Mac. 

    It’s very frustrating having to limit layout possibilities to accommodate this -still popular enough- Mac browser.

    Copy & paste the code below to embed this comment.
  99. Used this one once to get me out of a jam. Client wanted “table” format layout but INSISTED that all markup be in CSS. Apparently, they were convinced it was the best way to go, .. even though they had never done any CSS markup.

    BTW ... I try to always make the entire layout “static” ‘cause there is nothing I dislike more than uncontrolled text/graphics “squishing” together in a column if the browser is resized (just a personal “flaw”).

    The client also wanted the columns to have pixel borders all around.

    The “fiendish” way that I got around it was to create a div ID layer to “lay under” the content layer (which had the three static columns). Because the layout was “white background”, I set the colour of the DIV layer to white and then added a 1px solid border on the right side. Wrapping all the other DIVs within that DIV put a white background with a border on the right side (independent of column heights) around everything.

    The reason I call it a KLUGE fix is that (of course) the layers inside the main content div STILL have independent borders which forces some “creative”
    tagging.

    If there are no borders (1 px left or right side) inside of the column layout ... this works awesomely because the DIV tag wraps the colour to the bottom of the longest column ... and ... around the rest of the columns within.

    Necessity and deadlines are the mothers of invention ;-)

    I realize that CSS is the future .... but I sure do miss the granular layout control of <TABLES> (don’t hate me).

    I hope that CSS3 will help to return us (graphic background coders) to the REAL flexibility that comes with total layout control.

    Thanks for listening…

    Copy & paste the code below to embed this comment.
  100. Check it out in the IE7beta2… yikes!

    Copy & paste the code below to embed this comment.
  101. Why, what happens? How about a link to a screenshot or a bit more info.

    Copy & paste the code below to embed this comment.
  102. Personally, I find fluid layouts really difficult to read, especially at higher resolutions. All printed media use multiple columns for content.

    It’s nigh on impossible to make a fluid layout look well designed.

    Copy & paste the code below to embed this comment.
  103. bq. Personally, I find fluid layouts really difficult to read, especially at higher resolutions. All printed media use multiple columns for content. It’s nigh on impossible to make a fluid layout look well designed.

    A fluid layout doesn’t have to fill the screen. It is very easy to set a max-width flag to stop the Neilsen Effect of lines 1500 characters long. What it does mean is that below a window size of, say, 1024px, you can make the best use of available space. Once you’ve taken away a column for the left sidebar and a column for the right sidebar - as we see on ALA - you’ve got a central column that’s about right for filling with text. So for someone using that size window, you would like the page to expand to the left and right margins.

    Have a look at “www.tjkdesign.com”:http://www.tjkdesign.com/ for an example of a well-designed 3-column fluid layout.

    For people with windows narrower than that, you want the page to shrink to fit the space available, rather than overflow and necessitate horizontal scroll - as we also see on ALA :-( - not so bad when part of a column is off the edge, because most people will realise it is there, but if an entire column is hidden, the majority of users probably won’t find it.

    Copy & paste the code below to embed this comment.
  104. I was experimenting with this layout trying to get it to look reasonable in IE5 when I remembered reading about the ‘height’ trick which introduces something called ‘layout’ in IE. I thought I’d try adding “height: 0.1%;” to the container in an ‘IE5 only’ filtered CSS, and it seems to work. The columns get messed up at small widths but at least it looks right at a more readable width. I only tried this with the un-padded version as I was starting from scratch.

    Copy & paste the code below to embed this comment.
  105. First of all it’s a very lean solution. I am not a web worker, but I was confronted with saving some tons of multilingual master data which ended up in several web applications and some database publishing. So I had the chance to appreciate the work of all of you and your striving efforts towards CSS. I’ve reworked the only site which is out at the moment tandemtours.hapimag.com according to Matthews recommendations because I still had a missing scrollbar in the second section, fortunately only in Safari (I think due to too many capsulated divs). Although my design has at least in the second section only 2 floating columns, I came up with nearly the same solution. In contrast to you, my solution is a bit clumsier. At least the bug is fixed.
    My comments: I think that the * html #left hack should cover RC full width + CC padding and Opera 9 is placing the footer now correctly, but still writes the columns to nirvana.
    Matthew’s a very good entry point for fast and robust development. Thank You.

    Copy & paste the code below to embed this comment.
  106. I’m sorry: I’ve justed tested your layout in IE7 Beta 2, and it doesn’t work, the left column disapears completly!

    Bye
    Tiggr

    Copy & paste the code below to embed this comment.
  107. Hi, you can try to fix that with conditional comments: http://blogkomm.com/testarea/grailbasic.html

    Copy & paste the code below to embed this comment.
  108. It sure would be nice if all the divs where the same height.  Is this possible?  This seems to be the one advantage of using tables instead of divs.  I know, heresy.  Keeping things symmetrical though is a bit more pleasing to the eye with uniform column height.

    Copy & paste the code below to embed this comment.
  109. “It sure would be nice if all the divs where the same height. Is this possible?”

    Did you read the article?

    Copy & paste the code below to embed this comment.
  110. While playing around with this yesterday I found that if you have an image with dimensions specified in the HTML wider than the available space when the window is resized to a smaller size, the left column jumps out of place.
    I found the solution was to take the dimensions out of the HTML and add a width to the image in the CSS instead so that the image is resized relative to the available space.

    Copy & paste the code below to embed this comment.
  111. It’s been pointed out that the images don’t look so great if the screen resolution causes the image to be displayed at a width wider than the image actually is. Which I guess means you’d need to resort to something like “Sven Tofte’s max-width for IE”:http://www.svendtofte.com/code/max_width_in_ie/

    Copy & paste the code below to embed this comment.
  112. Nice article and interesting technique, Matthew.

    I think previous comments have covered most of the feedback necessary.

    However, to be used in public/commercial projects, this technique obviously needs some work:
    http://www.browsercam.com/public.aspx?proj_id=226231

    The method I presented in a comment to Ryan Brill’s negative margin article here on ALA still beats anything I’ve seen so far. Why? Well, it doesn’t break. At all. Or, as another reader commented on my approach “-Source ordered. I can put the columns in any order without changing the markup. Flexible and/or fixed columns. Clean, more semantic markup. No need to wrap 2 columns anymore. Any column can be longest. I tested it on several browsers as well. It worked in all of them. Thanks.”

    Now, that was one and a half year ago.

    I’m certainly not dismissing your technique - if we want to develop and mature, we have to explore. I hope you keep us posted when you’ve discovered the Holy Grail in your technique.

    cheers
    /j.

    Copy & paste the code below to embed this comment.
  113. And what’s with that strikethrough? Ed?

    Copy & paste the code below to embed this comment.
  114. I have applied the proposed approach to www.plusandminus.net. It doesn’t seem to work in Opera and Netscape (I have looked at the example in Opera and the footer goes way below where it sits in IE.
    In IE the result is excellent.

    Copy & paste the code below to embed this comment.
  115. Fantastic article. I was busy redoing the website and this is just what I wanted… plus the drop-down menus from your site too. To get them to work together I added z-order=2 to the header and z-order=0 to the rest. Now I can have your great layout with your great drop down menus all together on the one page.

    Copy & paste the code below to embed this comment.
  116. Hi guys.  I can’t get it to work.  The left column disappears and the right column goes into my header.

    here is the link:
    http://www.macintoshclub.com/developerlink/template.html

    any ideas?
    axel

    Copy & paste the code below to embed this comment.
  117. I found the left column.  If the window is too small you cannot see the left column.  What should I do to fix this?

    Copy & paste the code below to embed this comment.
  118. “let’s try something more interesting.”:http://krisgale.com/layout.html

    Copy & paste the code below to embed this comment.
  119. Both this article and the “One True Layout” article on which it is based are extremely valuable and useful. But there is a bit of a problem with both of them and that is borders in combination equal height columns. The huge padding plus negative margin technique used to achieve equal height columns prevents the border from appearing along the bottom of the columns.

    You can do it by adding extra wrapper divs or other non-semantic div elements, but if someone could come up with a technique for equal height columns with borders that required no (or at least minimal) non-semantic divs I would be one very happy bunny!

    Copy & paste the code below to embed this comment.
  120. bq. The huge padding plus negative margin technique used to achieve equal height columns prevents the border from appearing along the bottom of the columns.

    Borders on the top, left, and right of the columns are easy enough; treat them just like padding.

    You can get a border along the bottom of each column by adding a *top* border to the footer. Anything more specific than that may require different tricks that depend on your situation; non-semantic markup might be indeed be necessary.

    Copy & paste the code below to embed this comment.
  121. So I’ve spent the better part of an afternoon working on this, and underfortunately, there is a problem with it when viewing it in IE.
    http://www.philaedfund.org/indexnew.html

    I’ve gone through the code over and over, checked for typos, etc, and I can’t figure out what is wrong.

    In Firefox it looks okay, I wish the rightmost column was a little bit more to the left (how can I pull that in?)

    If anyone can help me figure out what is wrong that would be great.

    Copy & paste the code below to embed this comment.
  122. I like the 3 equal height column layout alot and it seems to work fine in IE. But when I try viewing it in Firefox 1.5, the columns are not positioned correctly. Is there a fix so that this layout will work both under IE and Firefox?

    Copy & paste the code below to embed this comment.
  123. Maybe it’s just me, but the finished page is seriously broken in IE5 for Mac. Left col overlaps center by at least 100 pixels. Apart from that, the design is pretty sweet.

    Not a big deal for those of us that are running Firefox, Mozilla, etc., but yet another reminder that CSS does in fact call for a lot of patience, determination and… oh, yeah, commitment. (How many times have we looked at a deadline and thought of just throwing a table at the doggone thing and be done with it?)

    Every site I build has a ‘Get Firefox’ link at the bottom. ‘Brick by brick,’ as they say, at least until Microsoft decides to join the party.

    Nice work on the article, though. It’s a part of my growing reference section. Thanks much.

    gdane

    Copy & paste the code below to embed this comment.
  124. Anyone care to take a look at my code, see what I’m doing wrong..?
    In firefox everything is fine (duh), but udner IE, it seems the left column disappears completely, and the right one finds itself under the center column..
    eek!

    http://total.eclipse.co.il

    Copy & paste the code below to embed this comment.
  125. In the second-last example with equal-height columns and the footer over-flow trick.. there is one glaring problem:

    Hightlighting the text “scrolls” to the bottom of the paragraph in the layout, but there is obviously no frame control to provide a scrollbar to the content. One can make the content of the page completely disappear this way.

    One must be careful with this technique. I think there might even be a fix to the problem which I will post when I get a chance to experiment with it.

    Copy & paste the code below to embed this comment.
  126. Why does it not work in Amaya 9.3 or 9.4 (Mac OS X)
    the test bed for W3C ?

    Copy & paste the code below to embed this comment.
  127. In the article it states:
    “The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.”

    Note *modern browsers*. To my knowledge, IE5/Mac is not considered a modern browser.

    Copy & paste the code below to embed this comment.
  128. This design is worthless. It breaks in Both Mozilla and Internet Explorer. Once again CSS positioned divs fail, and Tables win. Try again CSS-P fanatics.

    Copy & paste the code below to embed this comment.
  129. Dan.

    It’s not worthelss - far from it. Useful in commercial/public projects? -No, not in a very near future. Another approach worth exploring and further nourish and develop? -Most certainly.

    I believe (and hope) the author is fully aware of the flaws in his design, hence the “in search of” in the title (see, there is a chance he wanted to share the concept with the css community, so that more minds could contribute in their own time).

    As for tables, I’m afraid you’re off track again. There are perfect ways to accomplish any desired layout with css that doesn’t break in any modern browser (including IE5/Mac and Konqueror/Linux, etc) - it’s merely a question of know-how and experience.

    I wouldn’t give up just yet if I were you - it’s all within reach.

    Copy & paste the code below to embed this comment.
  130. Hi-

    A lot of people are saying this technique doesn’t work.  I beg to differ:

    http://infotrek.er.usgs.gov/pubs/

    Not only does this site use this technique (based on the original OneTrueLayout article by Alex at positioniseverything.net), but it also wraps the entire layout in a ‘Jello’ container (a technique also from positioniseverything).

    To see the ‘jello’ behavior, try resizing the width of the browser window.

    So, its really the basics of the technique that are described in this article, but there are some fixes you need to apply for various browsers.  And I would say its not 100% perfect, but no layout technique is.  If you spot any layout issues, feel free to post them here (if still on topic), or send them to me at eeverman (an at symbol) usgs (a dot goes here) gov.

    Copy & paste the code below to embed this comment.
  131. seriously, people—this browser hasn’t been updated in seven? years? & is officially “dead” by it’s creators.

    Macs don’t ship with it anymore.

    In most site statistics, for sites that are compatible with ie5/mac & more, I’ve seen less than 1% of all users use this browser. I’m happy dropping them if it means I can have a great, well-programmed, functional & efficient site which works nicely.

    Copy & paste the code below to embed this comment.
  132. seriously, people—this browser hasn’t been updated in seven? years? & is officially “dead” by it’s creators.

    Macs don’t ship with it anymore.

    In most site statistics, for sites that are compatible with ie5/mac & more, I’ve seen less than 1% of all users use this browser. I’m happy dropping them if it means I can have a great, well-programmed, functional & efficient site which works nicely.

    Copy & paste the code below to embed this comment.
  133. “If you spot any layout issues, feel free to post them here”
    You could hide the big search section from your print format css. I mean that in a helpful way and not in a sarcastic way which is how it sounds when I read it back.

    Copy & paste the code below to embed this comment.
  134. Doesn’t the fact that we have an article like this and a thread like this prove that CSS just isn’t quite there yet for this kind of layout?

    I don’t want to be a party pooper or anything, but there seem to be some very pioneering minds writing the article and contributing (Eric Meyer for goodness sake!). But should it need that just to get a layout just to work? Does ‘this’ need to be bleeding edge?

    The kind of layout we’re talking about is the bread and butter of so many sites and it seems like a complete nightmare to get to work ‘consistently’ across browsers/platforms.

    I spend all my day writing the back-end of sites, and have now given up telling designers on the team to try this new layout or that new layout because all I hear is “it breaks!”. And it takes so long for them to figure it out as to become commercially unviable.

    I’ll stick with it, but only for R&D. :-|

    Copy & paste the code below to embed this comment.
  135. Doesn’t the fact that we have an article like this and a thread like this prove that CSS just isn’t quite there yet for this kind of layout?

    I don’t want to be a party pooper or anything, but there seem to be some very pioneering minds writing the article and contributing (Eric Meyer for goodness sake!). But should it need that just to get a layout just to work? Does ‘this’ need to be bleeding edge?

    The kind of layout we’re talking about is the bread and butter of so many sites and it seems like a complete nightmare to get to work ‘consistently’ across browsers/platforms.

    I spend all my day writing the back-end of sites, and have now given up telling designers on the team to try this new layout or that new layout because all I hear is “it breaks!”. And it takes so long for them to figure it out as to become commercially unviable.

    I’ll stick with it, but only for R&D. :-|

    Copy & paste the code below to embed this comment.
  136. http://shadow-fox.net/examples/threecolumns.html

    this code works with:
    mac ie5
    ie 5, 5.5, 6, 7
    opera
    firefox 1+

    what do you all think? could this be it?

    Copy & paste the code below to embed this comment.
  137. hmm, it does not allow the center column to appear first in the source, right?

    Copy & paste the code below to embed this comment.
  138. What works in a test site doesn’t always work in a life site. I also had the flickering and disappearing left col and didn’t find a solution. Now I tried the ‘don’t worry’ option. There is a strange thing about this also: in IE6 and IE7, at various screensizes, the content appears beneat the left and right col. See it on various pages at http://www.menp.nl/proef/profol/

    Copy & paste the code below to embed this comment.
  139. like said, this technique doesn’t allow content to be first in the html code and that is a very important aspect imho.

    Copy & paste the code below to embed this comment.
  140. My colleague Julian Birch has possibly found a way to get the Holy Grail working for IE5.x :

    1. Apply the Holly Hack to the container div.
    2. Set the left property to negative left column width.
    3. Use a box model hack for fixing padding issues.

    So, in practise I have:

    /* Holly hack for IE5.x */ * html #container { height:1%; }

    #left { width:200px;/* LC width */ left:-200px !important; lef\t:auto;/* IE5.x fix */ margin-left:-100%; }

    I’ve tested it briefly, seems to work so far (but I’ve not done any formatting on the content yet…)

    Copy & paste the code below to embed this comment.
  141. As for tables, I’m afraid you’re off track again. There are perfect ways to accomplish any desired layout with css that doesn’t break in any modern browser (including IE5/Mac and Konqueror/Linux, etc) — it’s merely a question of know-how and experience.

    ________________________

    Really? Then why is it so hard to create a “simple” 3 column, expanding layout that dosen’t break in CSS? I can create that layout in 2 seconds in HTML. If it’s so ‘easy’ and there are PLENTY od ways to do it, let’s see you do it Mr. Css-p defender.

    While you figure that out Ill go create some perfectly cross-browser consistent designs in HTML. Have fun.

    Copy & paste the code below to embed this comment.
  142. Thanks to Jake for posting about this.  I’ve managed to simplify the original version of this.  To recap, the easy parts of this are:
    * Holly hack the box model, or the footer goes crazy.  Personally I just put _* html div_ in all of my stylesheets, but you may feel like being more precise than that.
    * Fix the widths of the left and right columns, from _width_ to _width + 2* padding_.  Anyone familiar with IE5 hacks will know what I’m talking about.
    * Finally, the “fix IE6 rule” needs to be a bit more complicated.

    Basically, the current IE6 rule says

    _Rule:_ * html #left {
    left: 150px; /* RC full width */
    }

    (values are taken from the article) but IE5’s box model is wrong in a different way (although, ironically, a way that makes more sense).  In particular, you need

    left : -240px; /* LC fullwidth + central padding */
    so

    _Rule:_ * html #left {
    left : -240px; /* IE5 fix */
    lef\t : 150px; /* IE6 fix */
    }

    at the bottom of the file ought to do the trick.

    Disclaimer:  in practice, I auto-generate this stuff, so I just test for which browser I’m currently targetting.  The CSS hacks work right now, but we’ll need a new technique for IE7…

    Copy & paste the code below to embed this comment.
  143. Obviously, those should be “star html” references, and the comments have been bolded.  I hope it remains clear.

    Copy & paste the code below to embed this comment.
  144. I’m suffering from the overlapping menu problem.

    I’ve found quite simply, that when you look at the example file in your browser which is just a load of text, columns behave very well, but I’ve put a placholder of 350px width in the top of the center column and then the problems arise.

    And without that image, no probs… surely this has to be a simple thing to fix. I’m going to try to leave my pc now and get some sleep… good luck everyone!

    Kev

    Copy & paste the code below to embed this comment.
  145. Although initally optimistic, I’ve had some trouble with this layout in IE and firefox (as previously mentioned by others.)

    A good alternative that seems to work well for me in all browsers can be found here:

    Skidoo Too
    http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

    Copy & paste the code below to embed this comment.
  146. “My colleague Julian Birch has possibly found a way to get the Holy Grail working for IE5.x
    1. Apply the Holly Hack to the container div. 2”

    That’s what I said in post 105 but I couldn’t remember the name of the hack. I’m not a professional so I’m allowed to forget.

    Copy & paste the code below to embed this comment.
  147. If you use ASP.NET, which many do, you’ll be familiar with the validation summary.  The problem is, the left hand column jumps when it shows.  I _believe_ this is actually a problem with Dynamic HTML in general.

    To restate in formal terms, when content in the central column changes, IE fails to re-read the “left” property in the hack at the bottom.

    I’m working on a solution.

    Copy & paste the code below to embed this comment.
  148. Great article! Doesn’t work in IE7, but that’s a completely different story.

    Copy & paste the code below to embed this comment.
  149. The problem is (and this is quite weird).  Holly hacking IE6 actually introduces the “jumping left bar” problem.  Only to IE6.  Now, on the test page I had, both the dynamic html box and the layout divs were holly hacked, so it’s possible that it would be fine if some were switched off, but disabling the hasLayout for IE6 works just as well, so I left it like that.  Ironically, IE5 actually worked and didn’t display this rather broken behaviour.  The layout properties of hidden html must have changed (blech).

    Anyway, I can’t actually test IE 7 (long story), but try taking the star away from “star html” at the bottom.  Of course, that’ll break every other browser, but at least we’ll be a bit further along.  The search for an IE7 CSS hack continues…

    Copy & paste the code below to embed this comment.
  150. I don’t know if this was mentioned because I am too lazy to search the entire thread, but I think I remember somebody complaining that if the browser window is too narrow the divs start to go to the next line.  Using the min-width property on the container set to the width that the divs start wrapping to the next line (or otherwise mis-aligning) solves this problem.

    Also, I don’t know if this is appropriate, but I’ve put some of what I learned in this article “to use”:http://snakecult.tiredmachine.com on a layout I’m working on.

    Copy & paste the code below to embed this comment.
  151. Is there a way strictly with CSS to apply a background image (at the bottom of the column) to a column that has the equal height columns applied? Right now it is out of view because of the negative margin. I’ve been racking my brain on how to apply the background-image property so I have a nice footer image for my main content column…

    Copy & paste the code below to embed this comment.
  152. Coincidentally I read the PIE article only a few days before I found AP. Both articles are immensely enlightening.

    Copy & paste the code below to embed this comment.
  153. Thor Anderson, your layout breaks in Mozilla, and half the design dosen’t even appear in IE currently.

    Copy & paste the code below to embed this comment.
  154. has anyone found this holy grail solution? :) Obviously with content first in the html!

    Copy & paste the code below to embed this comment.
  155. Formatting seems to blow out in IE7 when messing with the scaling (magnifying option) in IE 7’s status bar.  Microsoft made it so easy for users to scale the page size, I believe it will be a common occurance with users.  Eric Meyer’s site blows out as well, hmmmm.

    Copy & paste the code below to embed this comment.
  156. Nice work, Matthew. Thanks for the article.

    I use a padding technique which I feel may be valuable to anyone using this (or any other) layout that requires padding.

    Once I have my boxes with perfected widths, I can add padding to children elements. Example:

    @h1 {
    padding: 0em 2em 0em 2em;
    }@
    @p {
    padding: 0em 2em 1em 2em;
    }@

    Then with markup such as:

    @<div id=“center” class=“column”><h1>Headline</h1>Paragraph.</div>@

    My content is padded with no impact on the structure of the boxes.

    The reason I use this technique is because it affords me greater consistency across the spectrum of graphical browsers (regarding spacing for P, UL, H1, etc.) and also enables me to control the amount of whitespace between these elements.

    Copy & paste the code below to embed this comment.
  157. Hello and first thanx for the article.
    I’m going to build a Site for my World of Warcraft Guild and used your article for the Layout.
    The Problem is, that Firefox shows it nicely and correct, but IE completly destroys the layout.

    thx for reading and hopefully anybody can help…

    Marius

    here is the code:

    html:

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
        “http://www.w3.org/TR/html4/strict.dtd”>
    <html>
    <head>
    <meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1”>
    <title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
    <link rel=“stylesheet” type=“text/css” href=”../template/relaxed.css”>
    </head>
    <body>


    <div id=“logo”></div>

    <div id=“container”>

      <div id=“inhalt” class=“column”>Das ist der Inhalt.
      </div>
      <div id=“navigation” class=“column”>###MENU###
      </div>
      <div id=“info” class=“column”>Hier sind die News
      </div>
     
    </div>

    <div id=“fusszeile-wrapper”>
      <div id=“fusszeile”>TEst</div>
      </div>

    </body>
    </html>

    and the css:
    /*** The Essential Code ***/

      body {
    width: 1000px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
    }

      #container {
    padding-left: 180px; /* LC fullwidth */
    padding-right: 220px; /* info fullwidth + CC padding */
    }
     
      #container .column {
    position: relative;
    float: left;
    }
     
      #inhalt {
    padding: 10px 20px; /* CC padding */
    width: 100%;
    }
     
      #navigation {
    width: 140px; /* LC width */
    padding: 0 30px; /* LC padding */
    right: 240px; /* LC fullwidth + CC padding */
    margin-left: -100%;
    }
     
      #info {
    width: 160px; /* Info width */
    padding: 0 10px; /* Info padding */
    margin-right: -110%;
    }
     
      #fusszeile {
    clear: both;
    }
     
      /*** IE Fix ***/
      * html #navigation {
    left: 150px; /* info fullwidth */
    }

      #container {
    overflow: hidden;
    }
     
      #container .column {
    padding-bottom: 1010px; /* X + padding-bottom */
    margin-bottom: -1000px; /* X */
    }
     
      * html body {
    overflow:hidden;
    }
     
      * html #fusszeile-wrapper{
    float:left;
    position: relative;
    width: 100%;
    padding-bottom: 10010px;
    margin-bottom: -10000px;
    }
     
      #fusszeile {
    position: relative;
    width:1000px;
    height:17px;
    }
     
      /*** Just for Looks ***/
      body {
    margin: 0;
    padding: 0;
    background: #FFF;
    }

      #logo{
    width:1000px;
    height:173px;
    background-image: url(../template/img/logo.png);
    }
     
      #fusszeile {
    font-size: small;
    text-align: center;
    color:white;
    padding: 0em 0;
    background-image: url(../template/img/impressum.png);
    }

      #navigation {
    //background: #cc9966;
    background-image: url(../template/img/test2.png);
    border-right: 2px solid black;
    }

      #inhalt {
    //background: #ffcc99;
    background-image: url(../template/img/test.png);
    }

      #info {
    //background: #cc9966;
    background-image: url(../template/img/test2.png);
    border-left: 2px solid black;
    }

      #container .column {
    padding-top: 1em;
    text-align: justify;
    }
     
      #navigation a {
    color: white;
    }
     
      h1 {
    color: Maroon;
    }
     
      .formular {
    color:Black;
    background-color:#cc9966;
    font-size:12px;
    font-family; Arial;
    border-bottom-width: 1px;
    border-color: #000000;
    border-left-width:1px;
    border-right-width:1px;
    border-top-width:1px;
    }

    Copy & paste the code below to embed this comment.
  158. Don’t know if this has been addressed yet but that layout doesn’t work at all in IE 5.5, nor IE 5.. Ie5 needs the same fix as IE6 but with negative margins.. so the proper fix is:

    * html #left {
    left: -150px; /* RC fullwidth IE 5 */
    lef\t: 150px; /* RC fullwidth IE 6 */
    }

    Copy & paste the code below to embed this comment.
  159. I’ve copied and pasted the CSS and HTML into a test page and it works fine in FireFix. The only problem is that the Left column isn’t appearing in Internet Explorer.

    The page is here: http://msofficer.com/justread/author.php

    Copy & paste the code below to embed this comment.
  160. I _almost_ have this 3-col layout working in IE7(beta2). See
    “http://www.medphysics.leeds.ac.uk/~dmh/mri2/ala_test.htm (try it out)”:http://www.medphysics.leeds.ac.uk/~dmh/mri2/ala_test.htm

    The page lays out fine except for a mass of white space below the footer. It seems that the background of the overflowing divs has been successfully clipped, but the divs themselves aren’t? Perhaps IE7b2 is not obeying the overflow:hidden instruction.

    IE6 and FF1.5 have no problems with it.

    Copy & paste the code below to embed this comment.
  161. <!—
    You’re gonna kick yourself when you see how easy this is:
    —>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html >

    <head>

    <style type=“text/css”>
    body {
    font-family:verdana;
    font-size:9pt;
    }
    #main {
    width:100%;
    backgroun-color:#eeeeee;
    }
    #left {
    background-color:blue;
    width:150px;
    }
    #left {
    background-color:blue;
    width:150px;
    }
    #right {
    background-color:red;
    width:150px;
    }
    td {
    vertical-align:top;
    padding:10px;
    }
    </style>

    </head>

    <body>

    <table cellpadding=“0” cellspacing=“0”>
    <tr>
    <td id=“left”>
    It’s true, CSS Positioning sucks
    </td>
    <td>
    <h1>How the hell did CSS positioning become the ‘right’ way to do positioning - it utterly sucks!</h1>
    OK time to be honest.  CSS positioning is an utterly stupid idea.  CSS was supposed to make life easier instead we have the laughable situation of a 3 column layout that works being some sort of ‘Holy Grail’ - ffs man you could do this like 12 years ago pretty easily and now its considered amazing if you can make 3 columns. It’s considered normal to ‘have to’ use hacks. wtf?!? talk about going backwards…
    CSS was designed to make it easy to change the font set and the colour on your website.  It was never designed to be used for layout.
    CSS POSITIONING SUCKS
    </td> 
    <td id=“right”>
    It’s true, CSS Positioning sucks
    </td>
    </tr>
    </table>

    </body>
    </html>

    Copy & paste the code below to embed this comment.
  162. Okay, Steve. Good method. Now use a stylesheet switcher to provide a zoom layout for low-sighted users. What’s that? You can’t make a zoom layout if you’ve layed it out using tables? You’re right, we really don’t care about low-sighted and blind users. To hell with proper semantic order.

    Copy & paste the code below to embed this comment.
  163. Even knowing that IE is absolut crap, you shouldn’t use hacks.
    It’s much better to use javascript for this situation.

    Copy & paste the code below to embed this comment.
  164. Rytis, at least hacks always work. And some percentile of users (I dare to say 5%, but that is only a guess) still have JavaScript disabled.

    Copy & paste the code below to embed this comment.
  165. Using some of the discussion in this article, I created a pretty comprehensive template. Code Nazis will go nuts since there are a few extra divs included, but the html and css included in the demo allows for a plethora of different layouts without having to adjust the html at all. I’d be curious to hear feedback and comments. You can play with it here: “http://macnimble.com/HolyGrail/functionalTemplate.php”:http://macnimble.com/HolyGrail/functionalTemplate.php

    Thanks…and be gentle…it’s my first post.
    -Bill

    Copy & paste the code below to embed this comment.
  166. Hi again,

    as I postet before, my layout doesn’t run on IE6.
    I just used the Holy Crail Article and more or less c & p the complete thing.
    I don’t understand why the IE makes everything unsorted und unreadable.
    However, how should I go on now? Is there any “how-to make my css works with IE” available ^^ ?

    escoba

    Copy & paste the code below to embed this comment.
  167. Trying to combine this with “Hybrid CSS Dropdowns” (http://alistapart.com/articles/hybrid/)

    I’ve got i working in Firefox, but IE is giving me trouble. When you mouseover on of the links in the menu, the left column jumps around. I’ve been trying to debug this for a few days now with no luck. Anybody care for a guess as to how to fix this?

    For my progres so far see: http://www.entrescenen.dk/2006/index-semi-working.html

    Copy & paste the code below to embed this comment.
  168. I recently used this method, Took my new layout to a client for approval. (using ie6) She wanted to see a long page so we could decide where fragment links(top)would go on the page in different res & text size.

    She clicked her wheel(mouse) & tried scrolling. Nothing-Ouch. So i went of & thought, faux columns it is then.

    Using .clearfix on the container worked & i got rid of 1more unsemantic div on the footer & full length textured bgs(I know, but she insists). Already figuired out the left, right isue & always use conditionals for ie. but still no left column. by chance/accident ;) i pasted position:relative onto .clearfix. left column back in play.

    A few flukes got me here, but i’m here. now what about ie-mac?
    Is there an ie-mac hack that ie-win won’t see & is ie7 safe??, would come in use.

    I need ie-mac working as most of my clients use it,(publishers, eyes rolling.) It’s one thing to exclude a few users but another to exclude clients!

    For those that are interested:::

    clearfix….CSS:
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    CSS in conditional ie:
    .clearfix {
    height: 1%;
    position:relative
    }

    X(HTML):::In head:
    <!—[if IE 5]>
    <link to ie5 stylesheet />
    <![endif]—>
    <!—[if IE 6]>
    <link to ie6 stylesheet />
    <![endif]—>
    <!—[if IE 7]>
    <link to stylesheet (but who knows for sure, what will have to go in here??)/>
    <![endif]—>

    In Body::
    <div id=“container” class =“clearfix”>
    yaddda yaddda
    </div>

    I put one bg-image on the body(left) an another in #container (right)so no extra divs needed.

    Jon

     

     

    Copy & paste the code below to embed this comment.
  169. Please help - I’ve read through the posts and although this has been mentioned by others I can see no fix for it. I’ve built a page at http://homepage.ntlworld.com/witchmen/Hex/index.html & it works fine in current versions of Firefox & Opera and also in the latest IE7 preview, but in IE6 the left column appears over the center one. It moves back to the correct location if you drag & resize the browser width but a refresh throws it back over the center column again. Is there a fix for this? Have I introduced an error in my implementation?

    Copy & paste the code below to embed this comment.
  170. Maybe someone else can confirm this for me. The issue with IE6, in my case, was that I had moved the css into an external stylesheet referenced in the head, and used a <form runat=“server”>. The resulting HTML has the __doPostBack script immediately after the <form> tag, and before the header div, meaning this:

    <body>
      <form id=“form1” runat=“server”>
          <div id=“header”>Header graphic and such</div>

    renders like this:
    <body>
    <form name=“aspnetForm” method=“post” action=“Test.aspx” id=“aspnetForm”>
    <div>
    ...hidden asp.net inputs…
    </div>

    [removed]
    ...asp.net’s _doPostBack code ...
    [removed]
     
    <div id=“header”>Header graphic and such</div>

    It appears that the presence of the [removed] tag is throwing off IE upon the initial page load. If I view the rendered source, save it as HTML, then strip out the [removed] content, the page behaves as it is supposed to. Likewise, if I declare the styles inline, after the __doPostBack code, the layout works fine.

    I’ve been trying to find info on IE reserving space for the [removed] tag, but have found nothing. Can anyone else confirm this to be an issue?

    Copy & paste the code below to embed this comment.
  171. 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.
  172. 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.
  173. 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.
  174. 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.
  175. 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.
  176. 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.
  177. 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.
  178. 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.
  179. <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.
  180. 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.
  181. 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.
  182. 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.
  183. 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.
  184. 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.
  185. 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.
  186. 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.
  187. 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.
  188. 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.
  189. 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.
  190. 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.
  191. 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.
  192. ...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.
  193. 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.
  194. 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 x 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.
  195. 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.
  196. 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.
  197. 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.
  198. Too much bugs for a Holy Grail.

    Copy & paste the code below to embed this comment.
  199. 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.
  200. 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.
  201. 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.
  202. 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.
  203. 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.
  204. 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.
  205. 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.
  206. 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.
  207. @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.
  208. 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.
  209. 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.
  210. 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.
  211. 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.
  212. 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.
  213. 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.
  214. 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.
  215. 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.
  216. 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.
  217. 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.
  218. 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.
  219. 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.
  220. 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.
  221. 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.
  222. 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.
  223. 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.
  224. 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.
  225. 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 800x600 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.
  226. Sorry, commenting is closed on this article.