The best css evar

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

W3C really screwed up the box model. This will make your webs better. (It doesn’t work in IE7, but why are you still supporting it anyway?)

Side note, IE6 is border-box by default. IE7 changed it to follow W3C standards eventually. Perhaps one of those times IE got it right. They’re quite the hipster it appears. 😉

I wouldn’t say W3C screwed up. IE6 was using border-box and switched to content-box eventually in IE7. The other browsers were all using content-box back then and W3C standards embraced content-box. When IE7 came along, they flipped to content-box, but it doesn’t provide a box-sizing CSS property which became essential 5 years later (IE7 is released in 2006). As Paul mentioned, it does seem more intuitive to have it border-box after all. It is hard for W3C to envision this is going to be the way people prefer things so many years ago too; I’m just glad there’s a box-sizing attribute to give more options to developers.