Will this work with older browsers? Where can I expect support for this?
The article explains that in full (everying apart from <=ie7)
* { box-sizing: border-box } FTW
21–30 of 90 posts
Re: * { box-sizing: border-box } FTW
#22The 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.
One of the biggest failings of the W3C model was that you could not combine a percentage width with fixed margin. If you wanted a fluid layout but which still incorporated consistent margins it was impossible to achieve without an entirely unnecessary nesting of divs.
Border-box completely eliminated this and poor old Microsoft (in this one instance) were forced to fall in with the less helpful "standard".
Re: * { box-sizing: border-box } FTW
#23As 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.
I think IE worked this way only if there was no DOCTYPE. Or am I mistaking this with some other IE "bug"?
Re: * { box-sizing: border-box } FTW
#24Incredible. 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
#25Incredible. 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
#26Incredible. 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
#27Re: * { box-sizing: border-box } FTW
#28I'm eager to use it, but as I use Bootstrap I imagine it breaks it ?
Re: * { box-sizing: border-box } FTW
#29I didn't read the article, but love the mouse effects outside of the content area :D