A LIST Apart: For People Who Make Websites

No. 211

Discuss: In Search of the Holy Grail

Pages

 <  1 2 3 4 5 >  Last »

21 No damn good at all in Netscape 3

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 at 10:14 am on January 31, 2006 by Taco Sanchez

22 Right column disappears in IE6

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 at 10:18 am on January 31, 2006 by Eoghan O'Brien

23 Untitled

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 at 10:21 am on January 31, 2006 by Jack Sleight

24 "Almost"

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 at 10:23 am on January 31, 2006 by Adam Craven

25 RE: My Last Comment

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

posted at 10:23 am on January 31, 2006 by Jack Sleight

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.

posted at 10:23 am on January 31, 2006 by Matthew Levine

27 fixed width Centre's

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 at 10:49 am on January 31, 2006 by Brad Snoregrass

28 IE footer

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 at 10:50 am on January 31, 2006 by Michael Neel

29 Sorry, the HTML was, uh, tendered.

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

posted at 10:50 am on January 31, 2006 by Brad Snoregrass

30 I disagree with the "Holy Grail" dubbing

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 at 10:50 am on January 31, 2006 by Trolll L

Pages

 <  1 2 3 4 5 >  Last »

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)