Holy Grail CSS

not sure how this really works...

[newnewbie1]

OK I'm looking at the famous 3-column "holy grail" CSS layout as described here:
[glish.com...]

I'm still not sure about the center colum...
What in this stylesheet code makes it expandable:

#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

Also, what is voice-family?

thx!

[Longhaired Genius]

A CSS box (and HTML in general) will expand laterally by default, so no special provision is needed.

"Voice-family" is a CSS selector used with screen readers but it is used here as part of a hack to deal with the way Internet Explorer 5 renders padding and margin different from other browsers. A search for "tantek voice-family hack" will tell you what you need to know.

[WibbleWobble]

box hack [tantek.com].

[newnewbie1]

Oooh, this is giving me a headache!

I'm still not sure what this is doing...

It's got 2 margin-left & margin-right... 199, and 201. That just doesn't make sense...

Also I'm not sure what this does either:
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

[Nick_W]

If you study the box model hack site by tantek (link given above) all will become clear ;)

Nick

[SuzyUK]

It's got 2 margin-left & margin-right... 199, and 201. That just doesn't make sense...

That's what the "voice-family hack" is. The first set are read by IE which then stops reading because of the voice family parse error...the second set are for everything else

and then just in case, it's also called "the be nice to Opera Rule", you add the bit below which repeats the widths in a way that Opera (and Newer NN?) browsers like

Also I'm not sure what this does either:
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

It took me ages to figure this out too, and I try to avoid using pixel perfect designs now for this very reason ;)

Suzy

[bill]

I'm really late to the party on this one, but ... papabaer gave me some great advice about this very problem last year.

avoiding Tantek Celig's box model hack [webmasterworld.com]

[SuzyUK]

Thanks for that link Bill, hadn't seen that post.

IMHO it's very good advice too

Suzy