Fixing The Box Model [Update]

As great as web standards are, the standard against which box widths are measured is ridiculous. The details are all explained in this image, but suffice to say the width of a box doesn’t count its padding or borders.

Fortunately you can fix this. Simply use the following CSS:

.box {
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

This changes the box model behavior, so that borders and paddings are part of the width you apply. This is especially useful when styling form fields such as textarea and input.

[Update]: As it turns out, the above works for IE6 and IE8, but not IE7. So for IE7, you still have to serve a separate stylesheet.

12 thoughts on “Fixing The Box Model [Update]”

  1. Great in the box thinking Joen!

    Does this work for IE6 too?

    1. Joen says:

      James John Malcolm: Does this work for IE6 too?

      To my understanding, it doesn’t have to! Because the box model is one of the very few things IE6 got right!

      (So in other words, the effect of the above vendor specific CSS properties is the default behavior in IE6)

      Edit: Got “right”, in that it did not adhere to the broken W3C standard.

    2. Doh! Of course. Thought that was only 5 and 5.5 – and that 6 needed quirks mode to get it ‘right’.

    3. Joen says:

      Actually, this is worth checking out — my lack of support for IE6 means what I know about it is what I remember. I’ve stopped checking.

      So what you mention about quirksmode in IE6 could quite possibly still be right.

    4. It does apparently:

      The result is the same behavior that Internet Explorer versions 6 and 7 exhibit while in quirks mode, and that Internet Explorer for Windows versions 5 and 5.5 will display at all times.

      http://reference.sitepoint.com/css/moz-box-sizing

  2. Also, when you’re using (css3’s) multiple columns, border-box screws up your specific column-gap: 10px; when you also have padding on the element. The column-rule ends up in the wrong place, i.e. not in the middle.

    The workaround, of course, is to put padding on the surrounding element, but that does defeat the whole point of defining a width and knowing that’s going to be it.

  3. czert says:

    I really wouldn’t consider the standard “ridiculous” or “broken”. Unintuitive doesn’t necessarily mean bad. While the border-box sizing does have its advantages, the standard sizing has them too — as always, all depends on what you are trying to accomplish. I don’t see any point in choosing one of them and forgetting about the other.

    1. Joen says:

      The way I see it, if border-box had been default, and the current setup optional, there wouldn’t be any problem. I’m not against options, I just think it’s a bad default.

    2. czert says:

      I get that, I just don’t see what’s so bad about it, besides it not being very intuitive. CSS has many problems (lack of orthogonality being, in my opinion, the worst one), but what bothers people about the box model?

    3. Joen says:

      Well, when quickly building layouts in CSS, a really base example is a two-column layout.

      You create a centered container div. Say, 800px wide.

      You create two subdivs, main and sidebar. 500px and 300px. There, you have your layout, and you needn’t wonder about borders or paddings messing things up.

      Except, that would be with the border-box setting. If I want a border around each box and some padding, I have to take out a calculator.

  4. Jenny-fa says:

    That box model unintuitive-ness has always bothered me. I used to resort to sizing in percentages or having outside containers do the sizing for me (since prolonged arithmetic confuses me). Thanks for the tip.

  5. Levi says:

    Nice tip there Joen, I’ve never really thought about forcing the ‘good’ box model through CSS. I usually just rely on additional nested markup to achieve a similar result.

Comments are closed.