ALA's Holy Grail is bad?

[dave]

The article "In Search of the Holy Grail" at http://www.alistapart.com/articles/holygrail/
appears to only work when using pixels. I'm referring in particular to
his final example he calls the "wrapper free" at
http://www.alistapart.com/d/holygrail/example_4.html. Once you use ems
instead of pixels it fails horribly on IE7, FF2, and Opera9.2. I've
played with it a little but I'm not any good at CSS. I've also
searched about for other templates but out of the 30 or so I've seen
they all use pixels. I want to use ems so I can expand and contract
the text.

The problem seems to be due to the header and footer. If you color
them you can see the header doesn't fit correctly causing the
horizontal scroll bar to appear.

There's a php script I made to generate the CSS according to the
authors comments.
The first parameter is the size of the left column, the the padding of
the left column, the padding of the center column, the size of the
right column, and finally the padding on the right column, in that
order.

You can see by using the following params "prog.php 180 10 20 130 10"
it spits out the same numbers as the author has, but using ems not
pixels. Change the parameters to something that makes more sense for
ems, like 10 1 2 10 1 and see what you get. The example and program
are at www.seobm.com/home.shtml

 

[Toby A Inkster]

I've also searched about for other templates but out of the 30 or so
I've seen they all use pixels. I want to use ems so I can expand and
contract the text.

I put this together back in Feb 2005, so it's not been tested in IE7, but
it's generally a pretty robust 3 column technique.

http://examples.tobyinkster.co.uk/3col

Only problem that it might have is that it lacks a full-width footer. If
you want a footer, you have to just make it part of the middle column.

--
Toby A Inkster BSc (Hons) ARCS
http://tobyinkster.co.uk/
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

I put this together back in Feb 2005, so it's not been tested in IE7,
but it's generally a pretty robust 3 column technique.

http://examples.tobyinkster.co.uk/3col

The page itself looks good in IE7, Opera 9.20 and FF2.0. I just checked.

Only problem that it might have is that it lacks a full-width footer.
If you want a footer, you have to just make it part of the middle
column.

clear: both?

 

[John Hosking]

http://examples.tobyinkster.co.uk/3col

Only problem that it might have is that it lacks a full-width footer. If
you want a footer, you have to just make it part of the middle column.

Hrm. I'm confused. Why the middle column? Why not just add <div
id="footer">Blah</div> to the end of the outermost div (#wrap)?

 

[dave]

I have now included Toby's example as the only link to the original
page so I could look more closely at it. You can see the results at
http://www.seobm.com/test/layout01.shtml

Couple comments about Toby's CSS.
1) The header doesn't use the full width of the screen.
2) The left, center, and right are not close enough to each other. I'd
rather have no gaps between them and use padding inside.


I'd really like a footer too.

Anybody have suggestions on how to fix my original 3 column layout
with header and footer or a link to one that works with ems, not
pixels...

 

[Beauregard T. Shagnasty]

I have now included Toby's example as the only link to the original
page so I could look more closely at it. You can see the results at
http://www.seobm.com/test/layout01.shtml

Why are you using a table for the menu? This is more appropriately a
list. Lots easier to maintain as well.

Couple comments about Toby's CSS.
1) The header doesn't use the full width of the screen.

Add margin: 0; to the body { }
Now, once you decide you don't like that, add some padding to the header
style.

2) The left, center, and right are not close enough to each other. I'd
rather have no gaps between them and use padding inside.

Different-coloured objects flush to each other look strange, imo.

I'd really like a footer too.

Just before the final
</div>
</body>
add:
<div id="footer">
<p>This is a footer. Blah blah blah.</p>

Anybody have suggestions on how to fix my original 3 column layout
with header and footer or a link to one that works with ems, not
pixels...

The only pixels I see in Toby's layout are:
.sidebar li { margin: 0 10px 0 20px; padding: 0; }
and it seems to work just as well with:
.sidebar li { margin: 0 1em 0 2em; padding: 0; }

 

[Toby A Inkster]

clear: both?

Nuh-uh! The left and right columns are absolutely positioned, so this
won't work.

Also, with regard to John Hosking's suggestion -- yes, that will work, but
only in very limited circumstances: where you can guarantee that the
middle column will be the longest. Again this is due to absolute
positioning, which will cause the side columns to overlap the footer
if they are longer than that middle column.

--
Toby A Inkster BSc (Hons) ARCS
http://tobyinkster.co.uk/
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[Toby A Inkster]

1) The header doesn't use the full width of the screen.
2) The left, center, and right are not close enough to each other. I'd
rather have no gaps between them and use padding inside.

I didn't say you wouldn't need to adjust it a little. I kept the CSS as
minimal as possible to make it easy to see what's going on. In a real life
situation, you'll want to play with margins, paddings, widths, borders,
backgrounds and so on.

--
Toby A Inkster BSc (Hons) ARCS
http://tobyinkster.co.uk/
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[dave]

Why are you using a table for the menu? This is more appropriately a
list. Lots easier to maintain as well.

That was just quick and dirty. I now removed the table and used

Add margin: 0; to the body { }
Now, once you decide you don't like that, add some padding to the header
style.

Ok, I did that. I don't know if I'll have any color in the final
version. The colors help me with alignment issues and such and that's
why I put them in.

Different-coloured objects flush to each other look strange, imo.

I changed the margin from 11 to 10 and now I seem to have the
everything but the vertical difference to the header right.

Just before the final
</div>
</body>
add:
<div id="footer">
<p>This is a footer. Blah blah blah.</p>
</div>
then style #footer to taste. Works in IE6, Firefox, Opera...

The header didn't span the right column following your suggestions.
Take a look at http://www.seobm.com/test/layout02.shtml to see what I
mean. Perhaps I didn't follow your instructions correctly?

The only pixels I see in Toby's layout are:
.sidebar li { margin: 0 10px 0 20px; padding: 0; }
and it seems to work just as well with:
.sidebar li { margin: 0 1em 0 2em; padding: 0; }

I'm confused. I didn't see any mention of pixels in Toby's article.
Where did you find
.sidebar li { margin: 0 10px 0 20px; padding: 0; }?

 

[dave]

clear: both?

Care to elaborate a little more Kim? I'm just learning CSS and have no
idea how to incorporate that line and put a header in to Toby's
example. Give me enough to go on and I'll put a test page together
based on your input.

 

[Beauregard T. Shagnasty]

The header didn't span the right column following your suggestions.
Take a look at http://www.seobm.com/test/layout02.shtml to see what I
mean. Perhaps I didn't follow your instructions correctly?

Ah yes. Sorry about that. I had added enough content in my local sample
to give the center column enough height to be longer than either
sidebar.

Nope, no easy trick that I see at a glance. There are other samples out
there with footers, though, that claim to stay below all columns. Google
around...

I'm confused. I didn't see any mention of pixels in Toby's article.
Where did you find
.sidebar li { margin: 0 10px 0 20px; padding: 0; }?

In the style sheet. :-/

 

[dave]

Ah yes. Sorry about that. I had added enough content in my local sample
to give the center column enough height to be longer than either
sidebar.

Nope, no easy trick that I see at a glance. There are other samples out
there with footers, though, that claim to stay below all columns. Google
around...

Every time I get to a site that looks like it's what I want I see it's
actually done with pixels, not ems.

I spent a great deal of time looking for a three column with header
and footer liquid template as I said in my first post.

Guess it's time to go googling again.

 

[Greg N.]

I spent a great deal of time looking for a three column with header
and footer liquid template as I said in my first post.

Guess it's time to go googling again.

Looks simple to me:

http://coolhaus.de/misc/grail.htm

No wrapper div, no absolute positioning, no negative margins, no hacks.

Maybe I'm being naive, maybe this does not work on browsers other than
FF aind IE6. See for yourself.

 

[dorayme]

Looks simple to me:

http://coolhaus.de/misc/grail.htm

No wrapper div, no absolute positioning, no negative margins, no hacks.

Maybe I'm being naive, maybe this does not work on browsers other than
FF aind IE6. See for yourself.

And works nicely on all my Mac browsers including, surprise
anyone?, Mac IE 5.

validator.W3.org is no perfectly happy though, says you are
missing a </head> but it is there! I expect you grabbed for
convenience this code from some site of your own where you needed
the doctype (I recall you had a problem with Google maps without
such a doctype and ensuing conventions). But surely good old 4.01
Strict would be fine for this example.

 

[Greg N.]

validator.W3.org is no perfectly happy though, says you are
missing a </head> but it is there! I expect you grabbed for
convenience this code from some site of your own...

No, I used one of the samples from (e-mail address removed) as a starting point
and did not bother to validate or even look at the doctype.

It's fixed now.

 

[BootNic]

[email protected]
(e-mail address removed) wrote: [snip]
http://coolhaus.de/misc/grail.htm

No wrapper div, no absolute positioning, no negative margins, no
hacks.

This example is a 3 column layout, but I do not think it qualifies to be
classified as a "grail"

The main page content should appear near the top of the source, after
the header, followed by the right then left columns or left then right
columns.

[snip]
--
BootNic Sunday, April 29, 2007 9:35 PM

When men are pure, laws are useless; when men are corrupt, laws are
broken.
*Benjamin Disraeli*

 

[BootNic]

news: (e-mail address removed)
The article "In Search of the Holy Grail" at
http://www.alistapart.com/articles/holygrail/ appears to only work
when using pixels.

The wrapper version can be set in em, or any other unit you would
care to use. It is lacking a fix for IE7, which would be the same as the
fix for IE6, but IE7 ignores the * html hack.

A conditional comment would be useful:

<!--[if gte IE 6 & lte IE 7]>
<style type="text/css">
#left {
left: 15em; /* RC width */
}
</style>

I'm referring in particular to
his final example he calls the "wrapper free" at
http://www.alistapart.com/d/holygrail/example_4.html.

[snip]

--
BootNic Sunday, April 29, 2007 9:56 PM

"The POP3 server service depends on the SMTP server service, which
failed to start because of the following error: The operation
completed successfully."
*Windows NT Server v3.51*

 

[dave]

Looks simple to me:

http://coolhaus.de/misc/grail.htm

No wrapper div, no absolute positioning, no negative margins, no hacks.

Maybe I'm being naive, maybe this does not work on browsers other than
FF aind IE6. See for yourself.

That's almost perfect Gregor. The main column appears to be about an
em below the header with FF2, IE7, and Opera9. Do you have any idea
how to get it directly under the header?

On IE7 the footer is also about an em below the right column. But not
on Opera9 or FF2.

This is by far the closest I've seen to something I like. Even if the
above can't be fixed I'll run with it. Thanks.

By the way, I've played with it and put it at http://www.seobm.com/test/layout05.shtml

Good luck on the motorrad!

 

[dave]

Looks simple to me:

http://coolhaus.de/misc/grail.htm

No wrapper div, no absolute positioning, no negative margins, no hacks.

Maybe I'm being naive, maybe this does not work on browsers other than
FF aind IE6. See for yourself.

That's almost perfect Gregor. The main column appears to be about an
em below the header with FF2, IE7, and Opera9. Do you have any idea
how to get it directly under the header?

On IE7 the footer is also about an em below the right column. But not
on Opera9 or FF2.

This is by far the closest I've seen to something I like. Even if the
above can't be fixed I'll run with it. Thanks.

By the way, I've played with it and put it at http://www.seobm.com/test/layout05.shtml

Good luck on the motorrad!

 

[Greg N.]

The main column appears to be about an
em below the header...

http://www.seobm.com/test/layout05.shtml

That's easily fixed by giving the main div an appropriate negative top
margin.