Quick Tip: Did Internet Explorer get the Box Model Right?

Another alternative will be Mozilla’s upcoming “-moz-calc” – which I’m excited about. Google it if you’re not familiar with it yet. :)

From a designer’s perspective, the border-box model is much easier. You can change padding and borders without affecting the floating or position of the box you’re working on.
From a content perspective it’s the other way around. You can change padding and borders and be sure that your text/image/video will still fit in the box you’re working on.
I am all for giving priority to the content, even if you have to change the width of an element a hundred times while designing a site, so I’ll go with the content-box model.

I think the reason for not handling this like the ie6 does is that there is some kind of inconsistence if the horizontal padding is greater than the width. If you try to set the padding in your example to 150px for example, the box will be expanded to matching with the padding option.
In an absolute consistent solution of this situation the right padding would be left to the left padding and the other way round, so the content of the box had to be reflected by the vertical ax.

So the modern box model is the simpler and consistent solution and and in my opinion consistency is very important when handling problems like this one.

For the problem with adding borders in the 960-framework the css3 calc() operator should be fine.

When you’re packing a box and add padding does it change the the size of the box?

IE got this one right.

I think box sizing was one of the things IE actually got right which is why CSS3 has the box-sizing attribute.

If you are building a box out of wood in real life and you want it to be 10″x10″x10″ cube. What dimension would you cut each piece of wood? In real life you need to consider the size of your material also to build the box. But what if the edges are beveled? What if there is trim on the box.

If you are hired to build a 10″ cube and came to the client with a box that turned out to be one inch bigger because you put trim on it, you would not get paid.

Then later I come back and paint borders on the box, does that change the size of the box? I say yes it does, even if it is by a tiny amount.

Later I want to put something in the box that is 12″x12″x12″. Does the first box grow to allow the bigger box inside? I say no.

I think building a box on a web page should be just like building a box in real life, but in real life there is no equivalent to padding. There would be to borders. So is a border an atribute of the div as an object or is it another object associated with the div?

I would like the box to break if I put something to big inside the box, not other elements of the page. I can see if the object I put in the box does not fit unless the box grows to accept the borders I just added.

Normally you don’t have a problem if the box has no padding or borders, I say it 200px wide it stays that way. I would like the box to stay that way even after I add padding and borders.

Thanks for the tip. It sure has it’s uses, not everywhere, but like you’ve mentioned with floats, it certainly has its place.

Also, on the fence.

Would love if someone could point me to an alternative for Windows of xScope!

well, this seems to work better for floated layouts, but remember that a box set to width: 100px; border: 1px solid black; in this box model would have a content width of 98px so if you’re using 960.gs and you have three divs filling the container horizontally and you put two child divs in one, then you end up with a broken layout inside the box. I’m not quite sure if that made sense in words so :

section { box-sizing: border-box; border: 1px solid black; }

div.container_12
section.grid_4
div.grid_2.alpha
div.grid_2.omega
section.grid_4
section.grid_4

Since now the width of the first “section” is 2px smaller than it needs to be for the two floated divs it contains, the layout inside the section breaks and the “section” gets taller and affects the layout below it.

You really have to be careful with the box-sizing property it can make or break a layout. What we really need is a less fragile replacement for floats, or maybe an option to make parts of the box model be excluded from the flow of the document, like outlines and absolutely positioned elements.

I wouldn’t say that either of the methods is right. They are just different. The one thing I actually like IE for is that it breaks when it should. FF will compensate. I hate that. You put an image that is larger than the div in FF, it won’t break the layout, but it will destroy IE…AS IT SHOULD! If I forget to the end carrot on an element, I want the damn thing to bust, not assume that I meant to put it in there.

That being said, I for sure am NOT going to change the way a browser behaves to mimic IE, just because I might prefer one method over the other.

I see that IE8 offers the -ms-box-sizing: border-box;
That makes IE8 work like IE6 and IE7.
Opera uses box-sizing:border-box;

So it looks like you need all 4 to make all browsers observe the IE6 IE7 box model.

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box
box-sizing: border-box;

Interesting. I will have to try this on a typical wordpress theme. It might be a good way to insure they all look the same.