In Search of the Holy Grail
Issue № 211

In Search of the Holy Grail

by
Published in CSS, HTML, Interaction Design, Layout & Grids

I’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails.

Article Continues Below
Article Continues Below

But the name’s out there, and we all know what it means.

Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.

Many articles have been written about the grail, and several good templates exist. 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.

A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility. It will:

  1. have a fluid center with fixed width sidebars,
  2. allow the center column to appear first in the source,
  3. allow any column to be the tallest,
  4. require only a single extra div of markup, and
  5. require very simple CSS, with minimal hacks patches.

On the shoulders of giants#section2

The technique presented here is inspired by Alex Robinson’s brilliant One True Layout. Alex even addressed the Holy Grail problem in his article, but his solution requires two wrappers and makes padding difficult without a further layer of divs within each column.

Another lead came from Eric Meyer’s adaptation that uses positioning to mix multiple unit types. His example also yields a three-column layout with fixed sidebars and a liquid center. Unfortunately, it relies on approximate percentages and fills a portion of the viewport that varies widely with different screen resolutions.

Enough talk—let’s see some code#section3

The required HTML is intuitive and elegant.

(For the sake of clarity in demonstrating this technique, we are intentionally using the non-semantic ids “center,” “left,” and “right.” We recommend you use semantic ids in any application of this technique. —Ed.)

<div id="header"></div><div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div></div><div id="footer"></div>

That’s it. A single extra div to contain the columns is all that you need; this satisfies even my obsessive compulsive markup habits.

The stylesheet is almost as simple. Let’s say you want to have a left column with a fixed width of 200 pixels and a right column with a fixed width of 150 pixels. To simplify the comments, I’ll abbreviate the left, right, and center columns as LC, RC, and CC, respectively. The essential CSS is here:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

Simply replace the values with your desired dimensions and the grail is yours. 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.

Take a look and marvel at the elegance.

How it works#section4

The strategy is straightforward. The container div will have a liquid center and fixed-width padding on the side. The trick is then to get the left column to line up with the left padding and the right column with the right padding, leaving the center column to fill the liquid width of the container.

Let’s build this up step by step.

Step 1: Create the frame#section5

Start with the header, footer, and container.

<div id="header"></div><div id="container"></div><div id="footer"></div>

We pad the container with the width we want our left and right columns to occupy.

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}

Our layout now looks like this:

Figure 1: the outline of the header, footer, and container

Step 1: Create the frame

Step 2: Add the columns#section6

Now that we have our basic frame, we’ll stick in the columns.

<div id="header"></div><div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div><div id="footer"></div>

Next we add the appropriate widths and float them to get them in line. We’ll also need to clear the footer to keep it beneath the floated columns.

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
  clear: both;
}

Note that the 100% width on the center column refers to the width of the container div, exclusive of the padding. We’ll see this 100% width again as the layout comes together, and it will still refer to this central width of the container.

The columns now want to line up in order, but because the center column is taking up 100% of the available space, the left and right columns wrap.

Figure 2: the three columns lined up in source order

Step 2: Add the columns

Step 3: Pull the left column into place#section7

The only thing left is to get the colums to line up with the padding on the container. The center column starts exactly where it needs to be, so we’ll focus on the left column.

It takes two steps to get the left column in place. First, we’ll pull it all the way across the center column with a 100% negative margin. Remember that the 100% refers to the central width of the container, which is also exactly the width of the center column.

#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
}

Now the left column is overlapping the center column, sharing its left edge. The right column floats left and nestles against right edge of the center column (but still wraps), leaving us with the following:

Figure 3: the left column pulled 100% to the left

Step 3: Pull the left column into place—halfway there

To push the left column the rest of the way over, we’ll use relative positioning with an offset that’s exactly the width of the left column.

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}

The right property pushes it 200px away from the right edge; that is, to the left. Now the left column lines up perfectly with the left padding of the container.

Figure 4: the left column offset 200px to the left

Step 3: Left column pulled into place

Step 4: Pull the right column into place#section8

The only task remaining is to pull the right column into place. To do that, we just need to pull it out of the container and into the container’s padding. We’ll again use a negative margin.

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

Everything is now in its right place, and the wrapping disappears.

Figure 5: the right column pulled 100% to the right

Step 4: Pull the right column into place

Step 5: Design defensively#section9

If the browser window is resized so that the center becomes smaller than the left column, the layout breaks in a standards-compliant browser. Setting a min-width on the body keeps your columns in place. With IE6 this doesn’t happen, so the fact that it doesn’t support min-width isn’t a problem.

body {
  min-width: 550px;  /* 2x LC width + RC width */
}

Of course, no layout technique would be complete without requiring some sort of workaround in Internet Explorer. The negative margin pulls the left column too far to the left in IE6 (the full width of the browser window). We need to push it back to the right the full width of the right column—using the star-html hack to mask it from other browsers—and we’re ready to go.

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

The reason we need to use the width of the right column involves a bit of algebra. I won’t bore you with the details; you can work it out for yourself or just consider it another one of IE’s many charms.

Padding, please#section10

I’m no designer, but looking at the layout above offends even my aesthetic sensibilities. The unpadded columns are hard on the eyes and difficult to read. We need whitespace.

One of the drawbacks of using percentages with the One True Layout to create liquid columns that it makes padding the columns a bit tricky. Percentage paddings tend to look bad at some screen widths. Fixed paddings can be added, but only by cluttering the markup with a div nested inside each column.

With this technique, padding isn’t a problem. Padding can be added directly to the left and right columns; just adjust the width accordingly. To give a 10-pixel padding to the left column in the example above, but keep it’s full width (padding + width) at 200px, simply change the rule as follows:

#left {
  width: 180px;        /* LC fullwidth - padding */
  padding: 0 10px;
  right: 200px;        /* LC fullwidth */
  margin-left: -100%;
}

Padding the center requires a little more ingenuity, but no more markup and only a pinch of additional CSS.

The padding plus a width of 100% causes the center column to expand beyond the non-padded width of the container. In order to tame it back into place, we need to increase the right margin by the total amount of the padding. This ensures that the center column is only as large as we expect it to be.

Also, since the center column is now wider, the left column has a larger distance to move in order to get to the correct place. Increasing the offset by the total center padding does the trick.

To make this concrete, I’ll modify the example to add a 10-pixel padding to each side column (for a total of 20 pixels), and a 20-pixel padding to each side of the center (for a total of 40 pixels). The new CSS looks like this:

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}

Of course, top and bottom padding can be added without any problems.  See this nicely padded version for the full template.

This technique works just as well for ems. Unfortunately, you can’t mix-and-match ems and pixels, so choose, but choose wisely.

Equal-height columns#section11

This technique really comes together when the columns are given equal heights. The method I’m using is adapted wholesale from the One True Layout, so I won’t go over it in detail. To deploy it, simply add the following CSS:

#container {
  overflow: hidden;
}
#container .column {
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}
#footer {
  position: relative;
}

Here, I’ve given the columns an extra padding of 10px on the bottom.

The usual caveats apply. Be aware that Opera 8 has a bug with overflow: hidden that leaves all of your columns huge. A workaround is detailed on the One True Layout page; you can use that, or wait for Opera 9 (which fixes the bug) to come out of beta.

One additional problem unique to this layout is that IE doesn’t clip the column backgrounds at the bottom of the container. They spill out over the footer if the page is not as tall as the viewport. This isn’t a problem if you don’t have a separate footer, or if your pages are tall enough to ensure that you’ll always take up the whole viewport.

If you need that footer, though, never fear. This, too, is fixable, but requires one more div. Add a wrapper to the footer, like so:

<div id="footer-wrapper">
  <div id="footer"></div>
</div>

Now re-use the same trick with the equal columns to make the footer wrapper extend beyond the page, leaving the footer itself for you to do with as you please.

* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff;         /* Same as body 
                               background */
}

This solves the problem, and leaves us with the desired result and a minimum of cruft.

Oh, and there’s one more thing#section12

The extremists out there might be wondering to themselves whether there’s not an even better way to do this. After all, the method I’ve illustrated introduces a non-semantic container div. Surely we can’t have one extra div cluttering up our otherwise flawless markup.

If you, like me, have been wondering this very thing, wonder no more. As a special bonus, I present to you the wrapper-free Holy Grail, in all its minimalist glory. One div for each section of the code—no more, no less. Semantic bliss, almost worthy of the title of “Holy Grail.”

The principle behind the CSS is the same. The padding has been applied directly to the body, eliminating the need for any containers. Negative margins stretch the header and footer to ensure that they take up the entire space.

This tiny version works in all the aforementioned browsers, even (almost shockingly) Internet Explorer. Equal-height columns do not work, however, and this layout will break down for very small window widths. Use it with caution.

So what now?#section13

While this particular application of the Holy Grail is rather specific, the technique can be generalized considerably. Why not have two liquid columns? Why not switch up the column orders? These applications are beyond the scope of this article, but achievable with minor modifications. Use the grail wisely, and it can be a particularly handy (and clutter-free) addition to your bag of CSS tricks.

About the Author

Matthew Levine

Before working as a full-time web developer, Matthew taught elementary school and studied physics and philosophy. When he isn't streamlining websites he spends his time in the bayous of South Louisiana perfecting his cajun two-step.

225 Reader Comments

  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.

  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.

  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

  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.

  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.

  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…

  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.

  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.

  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?

  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 😉

  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!

  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.

  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.”

  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.

  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.

  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.

  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.

  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.

  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.

  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.

  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).

  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!

  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.

  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’.

  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.

  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.

  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).

  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.

  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.

  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!

  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.

  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.

  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.

  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 */

  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.

  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.

  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.

  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!).

  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

  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.

  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?

  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

  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

  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.

  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

    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..

  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. =)

  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!

  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._

  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 🙂

  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…

  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.

  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%20Design/index.html

  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.

  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.

  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

  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!

  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…

  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.

  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

  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.

  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.

  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.

  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).

  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?

  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.

  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.

  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.

  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.

  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.

  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.”

  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!

  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??

  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.

  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.

  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?

  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.

  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?

  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!

  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?

  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.

  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 (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…

  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.

  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.

  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.

  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.

  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.

  109. “It sure would be nice if all the divs where the same height. Is this possible?”

    Did you read the article?

  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.

  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.

  114. I have applied the proposed approach to http://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.

  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.

  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!

  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.

  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.

  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?

  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

  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.

  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.

  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.

  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.

  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.

  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.

  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.

  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.

  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. 😐

  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. 😐

  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/

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

  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; left: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…)

  141. “[b]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.
    [/b]”

    ________________________

    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.

  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 */
    left : 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…

  143. Obviously, those should be “star html” references, and the comments have been bolded. I hope it remains clear.

  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

  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.

  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.

  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…

  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.

  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…

  154. has anyone found this holy grail solution? 🙂 Obviously with content first in the html!

  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.

  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:

    @

    Headline

    Paragraph.

    @

    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.

  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:





    Dreispaltiges Layout mit Kopf- und Fußzeile

    Das ist der Inhalt.
    Hier sind die News
    TEst


    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;
    }

  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 */
    left: 150px; /* RC fullwidth IE 6 */
    }

  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.


  161. It’s true, CSS Positioning sucks

    How the hell did CSS positioning become the ‘right’ way to do positioning – it utterly sucks!

    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


  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.

  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

  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

  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:


    In Body::

    yaddda yaddda

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

    Jon

  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?

  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

    . The resulting HTML has the __doPostBack script immediately after the
    tag, and before the header div, meaning this:

    renders like this:

    …hidden asp.net inputs…

    It appears that the presence of the

  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.

  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.

  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…

  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 >:(

  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?

  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!

  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!

  182. I’m implementing this layout for a site at http://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

  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?

  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!

  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.

  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?

  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.

  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).

  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.

  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 */
    left: 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

  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.

  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.

  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!

  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.

  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

  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!

  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 🙂

  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…

    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; }

  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.

  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

  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.

  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

  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.

  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.

  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.

  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.

  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

  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

  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.

  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?

  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.

  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!!!

  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.

  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.

  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?

  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 800×600 or less). Also, I have noticed that occasionally the copy in the left/right columns cuts off when it reaches the footer – ideas anyone?

    Many thanks!

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA