* { box-sizing: border-box } FTW

#1

Post by tambourine_man » Thu, Feb 16, 2012, 1:38 PM UTC

* { box-sizing: border-box } FTW
paulirish.com

Re: * { box-sizing: border-box } FTW

#2

Post by 54mf » Thu, Feb 16, 2012, 1:54 PM UTC

Incredible. I wish someone had told me this a few years ago, would have saved me a ton of grief. Jeremy Keith said it best in the comments: "box-sizing: border-box is the bee's knees."

Re: * { box-sizing: border-box } FTW

#3

Post by nostradamnit » Thu, Feb 16, 2012, 1:58 PM UTC

I didn't read the article, but love the mouse effects outside of the content area :D

Re: * { box-sizing: border-box } FTW

#4

Post by cleverjake » Thu, Feb 16, 2012, 2:00 PM UTC

54mf wrote: post #2

Incredible. I wish someone had told me this a few years ago, would have saved me a ton of grief. Jeremy Keith said it best in the comments: "box-sizing: border-box is the bee's knees."

The way I have been getting around this until the last year or so was just double wrapping divs. Setting a wrapper to have the width you want with 0 margin and padding, and then assigning the padding and margin you want to the inner div does essentially the same thing

Re: * { box-sizing: border-box } FTW

#5

Post by tambourine_man » Thu, Feb 16, 2012, 2:01 PM UTC

As it's been said in the comments, it's amazing that after years of lobbying IE to change its box model to match W3C, we realize that maybe IE's model made more sense after all.

Re: * { box-sizing: border-box } FTW

#6

Post by agscala » Thu, Feb 16, 2012, 2:16 PM UTC

Will this work with older browsers? Where can I expect support for this?

Re: * { box-sizing: border-box } FTW

#7

Post by daleharvey » Thu, Feb 16, 2012, 2:25 PM UTC

agscala wrote: post #6

Will this work with older browsers? Where can I expect support for this?

The article explains that in full

(everying apart from <=ie7)

Re: * { box-sizing: border-box } FTW

#8

Post by agscala » Thu, Feb 16, 2012, 2:30 PM UTC

tambourine_man wrote: post #5

As it's been said in the comments, it's amazing that after years of lobbying IE to change its box model to match W3C, we realize that maybe IE's model made more sense after all.

People were lobbying for IE to change in order to make it consistent with the rest of the browsers, not necessarily because it was worse.

Re: * { box-sizing: border-box } FTW

#9

Post by themstheones » Thu, Feb 16, 2012, 2:30 PM UTC

The W3C box model spec forms a set of consistent rules that make sense. It's not the spec that's wrong. Just because it doesn't fit with your original intuition doesn't make it wrong.

Re: * { box-sizing: border-box } FTW

#10

Post by monsterix » Thu, Feb 16, 2012, 2:35 PM UTC

Paul is there an answer to this: http://stackoverflow.com/questions/8421533/how-to-obtain-ctr...

You'll know, so I am asking it here. Or is it even a right question in the first place?