Holy Grail 3-column layout and internal anchors

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each
of the informational sections. In Firefox 3 on Windows, clicking one of
these links shifts the page down so that the link's destination as at
the top of the viewport. Click "Employee Rewards", for example. All well
and good. But from there, scroll up just a couple of ticks (click the
arrow at the top of the scroll bar a couple of times or hit the Up key
twice). You can see that the page's banner and navigation didn't scroll
up as far as the content of the middle column--it's located right above
the top of the viewport. The content above the Employee Rewards section
has slid up underneath the banner! If you jump to the bottom of the
page, you can see that there is a lot of blank space at the bottom of
the middle column, where there hadn't been originally. So what's really
happening is that the *text* is sliding up correctly when the link is
clicked, but all the divs that divide up the page slide up only far
enough to put the banner and navigation out of view.

Another oddity is that if, after clicking one of the links, you click
the Back button, the same thing happens--even that doesn't restore the
original state.

If you shift-Tab, *then* the hidden content begins to scroll into view,
as you navigate backward through the list of links.

IE7 also gets this wrong, but in a different way. After you click one of
the links, the scrollbar continues to appear scrolled all the way to the
top. Hitting the Back button does nothing. If you scroll down, you can
see a large chunk of white space that hadn't been there when the page
was originally displayed. However, if you hold the mouse button down
somewhere in the main text and drag the cursor upward, *then* the page
will scroll upward and the content will come into view.

Any comments on why this happens and whether there is any way to fix it?

Harlan Messinger wrote:

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/)

FWIW, I don't believe there is a 'holy grail' of columned layouts. I
take most things at ALA with a large grain of salt, anyway.

A sample page is at http://www.gavelcade.com/grail-example.html.
Click "Employee Rewards", for example. All well
and good. But from there, scroll up just a couple of ticks (click the
arrow at the top of the scroll bar a couple of times or hit the Up key
twice). You can see that the page's banner and navigation didn't scroll
up as far as the content of the middle column--it's located right above
the top of the viewport. The content above the Employee Rewards section
has slid up underneath the banner!

The first thing I'd look for is overflow:hidden. Get Firebug if you
don't already have it. It might not explain why the phenomenon happens,
but should at least point to the relevant rules.

If you jump to the bottom of the
page, you can see that there is a lot of blank space at the bottom of
the middle column, where there hadn't been originally.

This looks suspicious:
padding-bottom: 1000em;
margin-bottom: -1000em;

Is 1000em magic in some way?

Any comments on why this happens and whether there is any way to fix it?

I'd fix it by using a different method for 3 equal columns. I'm partial
to the Ruthsarian layouts myself, but much simplified. Example:
http://www.bergamotus.ws/samples/3column-stretch-with-borders.html

BTW, I am not opposed to hacks, but use them as sparingly as possible.

--
Berg

Bergamot wrote:

Harlan Messinger wrote:
I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/)

FWIW, I don't believe there is a 'holy grail' of columned layouts. I
take most things at ALA with a large grain of salt, anyway.

A sample page is at http://www.gavelcade.com/grail-example.html.
Click "Employee Rewards", for example. All well
and good. But from there, scroll up just a couple of ticks (click the
arrow at the top of the scroll bar a couple of times or hit the Up key
twice). You can see that the page's banner and navigation didn't
scroll up as far as the content of the middle column--it's located
right above the top of the viewport. The content above the Employee
Rewards section has slid up underneath the banner!

The first thing I'd look for is overflow:hidden. Get Firebug if you
don't already have it. It might not explain why the phenomenon happens,
but should at least point to the relevant rules.

If you jump to the bottom of the page, you can see that there is a lot
of blank space at the bottom of the middle column, where there hadn't
been originally.

This looks suspicious:
padding-bottom: 1000em;
margin-bottom: -1000em;

Is 1000em magic in some way?

The purpose of that is to get each column's background color to continue
all the way down to the bottom of the div that contains all three
columns, without continuing below that div. You can see the additional
hack needed to get this to work in IE.

Any comments on why this happens and whether there is any way to fix it?

I'd fix it by using a different method for 3 equal columns. I'm partial
to the Ruthsarian layouts myself, but much simplified. Example:
http://www.bergamotus.ws/samples/3column-stretch-with-borders.html

BTW, I am not opposed to hacks, but use them as sparingly as possible.

Agreed.

In article <6t3eo5F8vu9dU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each
of the informational sections. In Firefox 3 on Windows, clicking one of
these links shifts the page down so that the link's destination as at
the top of the viewport. Click "Employee Rewards", for example. All well
and good. But from there, scroll up just a couple of ticks (click the
arrow at the top of the scroll bar a couple of times or hit the Up key
twice). You can see that the page's banner and navigation didn't scroll
up as far as the content of the middle column--it's located right above
the top of the viewport. The content above the Employee Rewards section
has slid up underneath the banner! If you jump to the bottom of the
page, you can see that there is a lot of blank space at the bottom of
the middle column, where there hadn't been originally. So what's really
happening is that the *text* is sliding up correctly when the link is
clicked, but all the divs that divide up the page slide up only far
enough to put the banner and navigation out of view.

Similar result in Safari 3.2.1 on Macintosh.

Another oddity is that if, after clicking one of the links, you click
the Back button, the same thing happens--even that doesn't restore the
original state.

Back button does not restore (refreshing page does). No obvious visual
way to get back to original internal menu at that point.

If you shift-Tab, *then* the hidden content begins to scroll into view,
as you navigate backward through the list of links.

Option Tab allows navigation through the internal links, and viewing
hidden content.

I remain suspicious of some of those negative margin bottoms. However I
forget why I never found the HolyGrail layout suitable. I am sure I
tried it, way back.

--
http://www.ericlindsay.com

Harlan Messinger wrote:

Bergamot wrote:
Harlan Messinger wrote:

http://www.gavelcade.com/grail-example.html.

This looks suspicious:
padding-bottom: 1000em;
margin-bottom: -1000em;

Is 1000em magic in some way?

The purpose of that is to get each column's background color to continue
all the way down to the bottom of the div that contains all three
columns, without continuing below that div.

I read the "logic" behind this over at
http://www.positioniseverything.net/articles/onetruelayout/equalheight

Sounds like voodoo to me. I'll pass.

--
Berg

Harlan Messinger wrote:

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each
of the informational sections. In Firefox 3 on Windows, clicking one of
these links shifts the page down so that the link's destination as at
the top of the viewport. Click "Employee Rewards", for example. All well
and good. But from there, scroll up just a couple of ticks (click the
arrow at the top of the scroll bar a couple of times or hit the Up key
twice). You can see that the page's banner and navigation didn't scroll
up as far as the content of the middle column--it's located right above
the top of the viewport. The content above the Employee Rewards section
has slid up underneath the banner! If you jump to the bottom of the
page, you can see that there is a lot of blank space at the bottom of
the middle column, where there hadn't been originally. So what's really
happening is that the *text* is sliding up correctly when the link is
clicked, but all the divs that divide up the page slide up only far
enough to put the banner and navigation out of view.

Another oddity is that if, after clicking one of the links, you click
the Back button, the same thing happens--even that doesn't restore the
original state.

If you shift-Tab, *then* the hidden content begins to scroll into view,
as you navigate backward through the list of links.

IE7 also gets this wrong, but in a different way. After you click one of
the links, the scrollbar continues to appear scrolled all the way to the
top. Hitting the Back button does nothing. If you scroll down, you can
see a large chunk of white space that hadn't been there when the page
was originally displayed. However, if you hold the mouse button down
somewhere in the main text and drag the cursor upward, *then* the page
will scroll upward and the content will come into view.

Any comments on why this happens and whether there is any way to fix it?

Have you looked at:

http://matthewjamestaylor.com/

It's what i'm using now.


--
Norman
Registered Linux user #461062

In article <6t3eo5F8vu9dU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each

The phenomenon you are seeing does not happen when following the
template more exactly.

If you substitute your middle content for the author's at

<http://www.alistapart.com/d/holygrail/example_1.html>

and get to the subsequent:

<http://www.alistapart.com/d/holygrail/example_1.html#plan529>

[latter is no functioning URL till you put in your content...]

you will see it functions as expected.

(btw, I thought the idea of a holy grail included full length cols (but
the side cols are content dependent in terms of background colour).

I make this reply to you in case it helps stops you throwing away the
whole idea in disgust. You might need to carefully start from it again
and test at each stage of your build for the irregularity you have seen.

(btw, is it the case that your pages on this site invariably have longer
content columns? If so we might be better off forgetting holy grails and
go for numerous practical grails...)

--
dorayme

In article <doraymeRidThis-C86784.13462014012009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <6t3eo5F8vu9dU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each

The phenomenon you are seeing does not happen when following the
template more exactly.

If you substitute your middle content for the author's at

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

and get to the subsequent:

http://www.alistapart.com/d/holygrail/example_1.html#plan529

[latter is no functioning URL till you put in your content...]

you will see it functions as expected.

(btw, I thought the idea of a holy grail included full length cols (but
the side cols are content dependent in terms of background colour).

I make this reply to you in case it helps stops you throwing away the
whole idea in disgust. You might need to carefully start from it again
and test at each stage of your build for the irregularity you have seen.

(btw, is it the case that your pages on this site invariably have longer
content columns? If so we might be better off forgetting holy grails and
go for numerous practical grails...)

I had time to take another quick look tonight and I better say now that
the author of your template, provided - as you would know - for full
length cols.

However, his recommended solution to get these full columns is what
*alone* triggers your problem:

#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}


You get to see your content again by overflow: auto; but no one will
like this!

Suggest you forget all this last trickery (the last few lines of CSS
above) and substitute more transparent trickery, namely just:

Make background to body something like:

background: #66F url("http://netweaver.com.au/alt/pics/orange.png") 100%
0 repeat-y;}

just one 'lil 'ol faux col positioned, the body background taking care
of left col. You have a min width set, it should be fine.

Anyway, that is latest thought. And it does not have the unwanted effect
you are seeing.

It's probably got some other unwanted side effect I am missing? <g>

--
dorayme

Norman Peelman wrote:

Harlan Messinger wrote:
I used the methods described in the A List Apart article "In Search of
the Holy Grail" (http://www.alistapart.com/articles/holygrail/) on a
website, duplicating its few IE6 hacks to cover IE7, and have been
pleased with the result until making one odd discovery.

A sample page is at http://www.gavelcade.com/grail-example.html. The
information on the page is preceded by a set of internal links to each
of the informational sections. In Firefox 3 on Windows, clicking one
of these links shifts the page down so that the link's destination as
at the top of the viewport. Click "Employee Rewards", for example. All
well and good. But from there, scroll up just a couple of ticks (click
the arrow at the top of the scroll bar a couple of times or hit the Up
key twice). You can see that the page's banner and navigation didn't
scroll up as far as the content of the middle column--it's located
right above the top of the viewport. The content above the Employee
Rewards section has slid up underneath the banner! If you jump to the
bottom of the page, you can see that there is a lot of blank space at
the bottom of the middle column, where there hadn't been originally.
So what's really happening is that the *text* is sliding up correctly
when the link is clicked, but all the divs that divide up the page
slide up only far enough to put the banner and navigation out of view.

Another oddity is that if, after clicking one of the links, you click
the Back button, the same thing happens--even that doesn't restore the
original state.

If you shift-Tab, *then* the hidden content begins to scroll into
view, as you navigate backward through the list of links.

IE7 also gets this wrong, but in a different way. After you click one
of the links, the scrollbar continues to appear scrolled all the way
to the top. Hitting the Back button does nothing. If you scroll down,
you can see a large chunk of white space that hadn't been there when
the page was originally displayed. However, if you hold the mouse
button down somewhere in the main text and drag the cursor upward,
*then* the page will scroll upward and the content will come into view.

Any comments on why this happens and whether there is any way to fix it?

Have you looked at:

http://matthewjamestaylor.com/

It's what i'm using now.

Ah, thanks. Evidently he's been tinkering with it, and he's produced
this updated arrangement with pixel-width left and right columns and
unspecified-width center column:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

I copied it and stuck my main content, with the links, into the center
column. It works. So let me incorporate this CSS into my page and see
what happens.

Thanks to all who replied.

In article <6t9nlsF9v8kdU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:
[snip]

Ah, thanks. Evidently he's been tinkering with it, and he's produced
this updated arrangement with pixel-width left and right columns and
unspecified-width center column:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

Now that looks nice! I took a quick look at the code, but don't have
time for detailed study - did anyone notice if there is anything in
there that wouldn't work HTML 4.01 strict (other than obvious changes
to closing tag format)?