211 Reworking the article

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

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.

posted at 03:48 pm on October 16, 2006 by Alex Leonard

212 PS

I have the holy grail implemented in a more complicated site here:
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

posted at 03:55 pm on October 16, 2006 by Alex Leonard

213 IE 7 height fix

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

posted at 01:40 pm on October 20, 2006 by Andrea Reatti

214 Right column still shifting, any suggestions?

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.

posted at 06:27 am on October 24, 2006 by Jonathon Suggs

215 Star hacks for the footer?

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?

posted at 02:27 pm on October 30, 2006 by Will Martin

216 IE 7

Will Martin – I’ve been using a few other “holy grail” layouts but still prefer this one over all of them.

However, I’ve only just had a chance to test it in the new IE7 and there is a horizontal scrollbar along the bottom:

http://www.alistapart.com/d/holygrail/example_4.html

on example 3, the footer has gone:
http://www.alistapart.com/d/holygrail/example_3.html

posted at 05:49 pm on October 30, 2006 by Tom Leadbetter

217 Oh, and....

Example 2, the left column has gone in IE7

http://www.alistapart.com/d/holygrail/example_2.html

Sorry :)

posted at 05:53 pm on October 30, 2006 by Tom Leadbetter

218 Rearranging HTML

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.

posted at 05:32 am on November 3, 2006 by Amit Varia

219 Doubled up columns

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

posted at 02:19 pm on November 3, 2006 by Adam Pearson

220 IE7 Fix

Here’s a fix for the disappearing column problem in IE7:

http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7

It uses IE’s expression keyword to calculate left margin at runtime, since IE7 is misinterpreting the -100% margin.

posted at 03:39 am on November 8, 2006 by Gerd Riesselmann