CSS3 box-sizing attribute
CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width.
The difference is basically the difference between the IE5 and W3C box models. The default will still be the W3C way we’re all used to where the padding and borders will be added to the width, it’ll just be possible to opt into the other way when it makes things easier.
How it works
Set the box-sizing style to content-box to get the traditional W3C box model. In this case the total width of the element will be the width set on the element plus the width of the borders and padding. If you had an element with a width of 30 pixels and a border of one pixel, the total width of the element would be 32 pixels:
-
#div1{ box-sizing: content-box;}
It can also be set to border-box to have borders and paddings included in the width. If you had an element with a width of 30 pixels and a border of one pixel the total width of the element would still be 30 pixels:
-
#div2{ box-sizing: border-box; }
Here’s how it would look in the browser. The top element has box-sizing set to content-box and the bottom has it set to border-box:
Why’s this useful?
I’ve always found the way the browser works out dimensions (the CSS box model) by adding the borders to the width set on the box a little frustrating when working with percentage widths.
Imagine you’re creating a two column layout. The left column should be 30% and the right 70%:
-
.left{
-
float: left;
-
width: 30%;
-
background-color: pink;
-
border: 3px red dotted;
-
height: 150px;
-
}
-
.right{
-
float: left;
-
background-color: lightgreen;
-
width: 70%;
-
border: 3px green dotted;
-
height: 150px;
-
}
-
<div class="left">content-box</div>
-
<div class="right">box-sizing</div>
If you add a border to either box, the total with of the elements will be greater than 100% so the second box will be pushed onto the next line:
But if we switch the box-sizing mode to border-box, we can set a border and the box will still be exactly the width that we want:
When’s it coming?
When IE8 comes out this will be supported by all four of the big browsers.
Safari – supported with -webkit-box-sizing since Safari 3.
Opera – supported in the latest version of Opera (9.5)
Firefox – supported with the -moz-box-sizing since Firefox 1.1.
Internet Explorer – supported with -ms-box-sizing in the IE8 beta 1 and without the prefix in IE8 beta 2.
More information
- The CSS3 box-sizing concept – an interesting write up about it from inside the W3C.
- Quirks mode – nice pictures to explain the differences between the two model
Comments
Helen,
As of IE8 Beta 2, the property can be used without the vendor-specific prefix (http://msdn.microsoft.com/en-gb/library/cc304082(VS.85).aspx)
Good, comprehensive article. I have always found the box model awkward, having to recalculate widths whenever I edit the padding, margin or border. Looking forward to the days I can leave those troubles behind for good.
Thanks for the IE8 beta 2 tip. I’ve updated the article. :)
I hope Safari and Firefox will leave soon the vendor-specific prefix: we have web standards, why don’t use them?
YAY! I agree Helen the W3C way is a bit, and sometimes HUGELY frustrating when working with percentage boxes. This is finally something so small but will make a huge impact on the way we do things.
@Tom: Apple won’t drop the the prefix because doing so “actually broke real-world Web sites” (Dave Hyatt – http://idreamincode.co.uk/browsers/yet-more-innovation-from-the-webkit-guys#comment-44).
There is a ticket (https://bugzilla.mozilla.org/show_bug.cgi?id=243412) in Mozilla’s Bugzilla relating to this issue. Judging by the timestamp of the last comment made, it could be a bit of time before the ‘-moz-’ prefix is removed.
i read articles about this attribute put never understand it put know i understand it now thank you very much
You might need to know that, even with the latest versions of Chrome, I had to use proprietary CSS to get this working consistently:
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
I think we have differing views on which one is the traditional box model, when I wrote my blog post about it (http://wp.me/p1V1Ia-f2) I called the border-box, IE5 version the traditional one – But great post nonetheless!
Trackbacks