Discuss: In Search of the Holy Grail

by Matthew Levine

31 Frame?

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 at 02:01 pm on January 31, 2006 by will chatham

32 Padding on right in col 3?

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 at 02:06 pm on January 31, 2006 by Bronskrat T. Polecat

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 at 02:25 pm on January 31, 2006 by Allen Jackson

34 Close, but...

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 at 02:34 pm on January 31, 2006 by Martin Mapes

35 Great visual instruction

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 at 02:37 pm on January 31, 2006 by Andrew Whitacre

36

Art director Jason Santa Maria created the illustrations in mental collaboration with author Matthew Levine.

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 at 02:51 pm on January 31, 2006 by Jeffrey Zeldman

37

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 at 03:04 pm on January 31, 2006 by Matthew Levine

38 Excellent!

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 at 03:05 pm on January 31, 2006 by Larry Preston

39 ::sigh::

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 at 03:41 pm on January 31, 2006 by Derek Pennycuff

40 Why 3-columns

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 at 04:13 pm on January 31, 2006 by Al Lemieux