Discuss: In Search of the Holy Grail
by Matthew Levine
- Editorial Comments
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
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.
Subscribe to this article's comments: RSS (what’s this?)



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