[thelist] How does "Box-in-a-box" hack work?

[John.Brooking at sappi.com]

Dear evolters,

Many places, such as the CSS-Discuss site[1], have documented the IE Box
Model problem and the "Box-in-a-box" workaround, where you put your content
in two DIV tags, set the width of both to your desired width, and set your
border and padding only on the inner div. I'm trying to understand why this
works, but I can't quite get my head around it. Maybe I'm being stoopid, but
I can't find an explanation that lays out why it works in enough detail.

I think the main thing I don't understand is how the inner DIV reacts when
you give it the same width as its parent, but then specify border and
padding. Ordinarily, under the W3C standard, the box width expands by the
amount of the border and padding, but that would put it beyond the width of
its parent DIV, right? Is that allowed? If not, what happens, in W3C
standard browsers? Do they instead shrink the content area like the broken
IE model does, so that now I'm coding everything to work like that? Or is
something else happening that I'm not getting? I've looked over the W3C
specs (briefly, I'll admit) and not seen this addressed.

A related discussion (which I'll bring up myself because I'm sure if I
don't, someone else will) is whether this is a desirable hack to use,
because it involves hacking the HTML rather than just the CSS. As [1] says
about it, "... years down the road, when a hack is finally cleaned from your
code, a CSS hack is quickly removed, while markup hacks are scattered hither
and yon. Plus it complicates the HTML, structurally speaking." I appreciate
both those arguments, but here's a counter-argument I'm having with myself:
In the years before this hack can finally be cleaned up, how many times am I
going to have to code around this, constantly calculating two sets of
numbers in order to use Tantek, SBMH, or some other pure CSS hack, and how
much more total time and effort will that take than cleaning up all the
markup hacks *once* at some future date? Especially if most of the markup
hacks are isolated in a few templates, rather than embedded "manually" in
each and every page? Comments?

[1] http://css-discuss.incutio.com/?page=BoxModelHack

John Brooking, Application Developer
Sappi Fine Paper
South Portland, ME, 04106 USA
-- 
 

This message may contain information which is private, privileged or
confidential and is intended solely for the use of the individual or entity
named in the message. If you are not the intended recipient of this message,
please notify the sender thereof and destroy / delete the message. Neither
the sender nor Sappi Limited (including its subsidiaries and associated
companies) shall incur any liability resulting directly or indirectly from
accessing any of the attached files which may contain a virus or the like.