A List Apart: Comments on: In Search of the Holy Grail

Posted by: Tristan Dunn

2012-01-31T13:00:49+00:00

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.

Posted by: Mike Purvis

2012-01-31T13:00:49+00:00

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.

Posted by: Michael Ennis

2012-01-31T13:00:49+00:00

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

Posted by: Dan C

2012-01-31T13:00:49+00:00

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

Posted by: Varun N

2012-01-31T13:00:49+00:00

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.

Posted by: Sammy Dellicour

2012-01-31T13:00:49+00:00

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.

Posted by: Marc van den Dobbelsteen

2012-01-31T13:00:49+00:00

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

Posted by: j i

2012-01-31T13:00:49+00:00

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.

Posted by: j i

2012-01-31T13:00:49+00:00

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.

Posted by: ban jax

2012-01-31T13:00:49+00:00

technical stuff, at long last. welcome back ALA.

Posted by: luca rossi

2012-01-31T13:00:49+00:00

I wrote a similar article one month ago, you can find it at http://www.blextar.net/index.php?post=47 . It's still easy and requires just the box-model and Holly hack, but it involves absolutely positioning. The idea was originally from the book "Css Hacks&Filters;".

Posted by: harry sutherland-hawes

2012-01-31T13:00:49+00:00

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?

Posted by: Derek O'Brien

2012-01-31T13:00:49+00:00

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

Posted by: James Greig

2012-01-31T13:00:49+00:00

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!

Posted by: danny j

2012-01-31T13:00:49+00:00

I can do the same with tables !

Posted by: Matt Hamm

2012-01-31T13:00:49+00:00

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.

Posted by: James Greig

2012-01-31T13:00:49+00:00

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

Posted by: Andrew Peace

2012-01-31T13:00:49+00:00

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.

Posted by: Marek Möhling

2012-01-31T13:00:49+00:00

I can post a screenshot if needed..

Posted by: Jonathan Shroyer

2012-01-31T13:00:49+00:00

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.

Posted by: Taco Sanchez

2012-01-31T13:00:49+00:00

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.

Posted by: Eoghan O'Brien

2012-01-31T13:00:49+00:00

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.

Posted by: Jack Sleight

2012-01-31T13:00:49+00:00

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.

Posted by: Adam Craven

2012-01-31T13:00:49+00:00

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.

Posted by: Jack Sleight

2012-01-31T13:00:49+00:00

Well, perhaps not "perfectly", but pretty good all the same.

Posted by: Matthew Levine

2012-01-31T13:00:49+00:00

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

Posted by: Brad Snoregrass

2012-01-31T13:00:49+00:00

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

Posted by: Michael Neel

2012-01-31T13:00:49+00:00

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!

Posted by: Brad Snoregrass

2012-01-31T13:00:49+00:00

body { min-width: 700px; text-align: center; margin-left:10%; margin-right: 10%; }

Posted by: Trolll L

2012-01-31T13:00:49+00:00

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.

Posted by: will chatham

2012-01-31T13:00:49+00:00

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

Posted by: Bronskrat T. Polecat

2012-01-31T13:00:49+00:00

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.

Posted by: Allen Jackson

2012-01-31T13:00:49+00:00

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.

Posted by: Martin Mapes

2012-01-31T13:00:49+00:00

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

Posted by: Andrew Whitacre

2012-01-31T13:00:49+00:00

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.

Posted by: Jeffrey Zeldman

2012-01-31T13:00:49+00:00

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.

Posted by: Matthew Levine

2012-01-31T13:00:49+00:00

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.

Posted by: Larry Preston

2012-01-31T13:00:49+00:00

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!

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

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.

Posted by: Al Lemieux

2012-01-31T13:00:49+00:00

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.

Posted by: Matthew Fehskens

2012-01-31T13:00:49+00:00

It's so simple that you would think every CSS-coder on Earth would have thought of it. Good article. ALA just keeps on packing in the great articles.

Posted by: Sergi de Pablos

2012-01-31T13:00:49+00:00

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.

Posted by: Lance Jurgensen

2012-01-31T13:00:49+00:00

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

Posted by: Hans Verhaegen

2012-01-31T13:00:49+00:00

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.

Posted by: Richard Anderson

2012-01-31T13:00:49+00:00

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.

Posted by: Hans Verhaegen

2012-01-31T13:00:49+00:00

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.

Posted by: Martin Halford

2012-01-31T13:00:49+00:00

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

Posted by: Roger Pence

2012-01-31T13:00:49+00:00

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

Posted by: Joe Murphy

2012-01-31T13:00:49+00:00

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.

Posted by: Brent Hagany

2012-01-31T13:00:49+00:00

Forgive me if I am misunderstanding something, but doesn't this have the potential to break in IE7, due to the use of * html?

Posted by: Marty McKeever

2012-01-31T13:00:49+00:00

Yes, negative margin values are offensive.

Posted by: Logan Hanson

2012-01-31T13:00:49+00:00

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

Posted by: michael paige

2012-01-31T13:00:49+00:00

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

Posted by: Tim Jarrett

2012-01-31T13:00:49+00:00

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

Posted by: Justin Perkins

2012-01-31T13:00:49+00:00

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.

Posted by: Sophie Dennis

2012-01-31T13:00:49+00:00

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

Posted by: Erin Kissane

2012-01-31T13:00:49+00:00

Afternoon, folks. First things first: Y'all rock. Without your input in the forums, our work would be much less helpful and less valuable. Cookies for all! ....and on to the comments. bq. I was quite appalled, however, that an article published at ALA would promote the outdated practice of sizing with px units. 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. 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�? Nope. Next! bq. 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 Ouch. This looks like a legitimate problem, and I look forward to seeing the collective brainpower of ALA's readership go to work to bulletproof the technique. ...and on preview: bq. 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. bq. The left-column thing is simple to diagnose but a bastard to treat. Excellent comment by Sophie (the whole thing). I'll make cookies for you myself.

Posted by: Beau Smith

2012-01-31T13:00:49+00:00

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

Posted by: Beau Smith

2012-01-31T13:00:49+00:00

The issue I mentioned in "comment #58":http://www.alistapart.com/comments/holygrail/?page=6#58 seems to only be present in FireFox on Mac and PC. IE6 seems to work fine.

Posted by: James Greig

2012-01-31T13:00:49+00:00

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!

Posted by: Matthew Levine

2012-01-31T13:00:49+00:00

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

Posted by: Justin Perkins

2012-01-31T13:00:49+00:00

Hacks and fixes for hacks. Matthew, why do you prefer this method as opposed to conditonal comments?

Posted by: Jason Hutchinson

2012-01-31T13:00:49+00:00

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

Posted by: Grant Palin

2012-01-31T13:00:49+00:00

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 [url="http://www.themaninblue.com/writing/perspective/2006/01/19/"]Resolution Dependant Layout[/url] 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...

Posted by: Scott Mackenzie

2012-01-31T13:00:49+00:00

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.

Posted by: Kevin Muncie

2012-01-31T13:00:49+00:00

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

Posted by: George Salhani

2012-01-31T13:00:49+00:00

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.

Posted by: Adam Ant

2012-01-31T13:00:49+00:00

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.

Posted by: Christian Montoya

2012-01-31T13:00:49+00:00

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

Posted by: phil smears

2012-01-31T13:00:49+00:00

'It doesn’t work worth beans in Netscape 3.' Hey and i've just tried it on my Zx 80 and it's all over the show.

Posted by: Tom Leadbetter

2012-01-31T13:00:49+00:00

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!

Posted by: phil smears

2012-01-31T13:00:49+00:00

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

Posted by: Terry Dowman

2012-01-31T13:00:49+00:00

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.

Posted by: Stephen Down

2012-01-31T13:00:49+00:00

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