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

Tom Dell'Aringa pixelmech at yahoo.com
Wed Jul 14 13:12:56 CDT 2004


--- John.Brooking at sappi.com wrote:
> 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.

John,

The problem with the box model is that in some cases padding and margins ARE taken into effect
when rendering the size of the box (IE4, 5, 6 in quirks mode) and in other browsers it isn't. If
you don't set any padding/margin on the OUTER box - it will render the SAME size in all browsers.
You can then safely set padding/margin on the INNER box because it can never get any bigger than
the outer box, since it is contrained by the size you put on it.

However - I hate the hack - it's not needed. The way I generally do things is to go ahead and set
sizes on my boxes, but leave off padding/margins. Then I pad/margin my ELEMENTS inside those
boxes.

So if I have a content DIV, I set the width. Then I pad the text/elements inside by setting
margins/padding on the P/DIV/whatever tags inside them. I've done this on my personal site and on
TruGreen.com if you want to poke around. 

I've not yet run into a problem with this method, so I'm going to continue using it until I find
something I can't build! It allows you to pretty much ignore the box model issue because it never
even comes into play - because you aren't adjusting the attributes (margin, padding) on your boxes
that cause the problem in the first place.

HTH

Tom

=====
http://www.Pixelmech.com/ - read my latest blog posting!

John 3:16





More information about the thelist mailing list