Live data from Hacker News

* { box-sizing: border-box } FTW

paulirish.com

21–30 of 90 posts

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

#21
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)

Could you not just trigger quirks mode in IE6 and IE7 to get the old box model, or is border-box different to the old microsoft box model?

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

#22

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.

It's not just an issue with intuition it simply makes it far harder to do many types of layout.

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

#23
post #13

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.

I think IE worked this way only if there was no DOCTYPE. Or am I mistaking this with some other IE "bug"?

Yeah, it was quirks mode.

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

#24
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

Right, exactly, and in a complex layout that adds a significant amount of extra markup. Not to mention trying to find which of the 4 or 5 columns is the one that's breaking the width of their container and causing the last column to break below the rest. It works, and has worked for me for a long time, but it's a hack.

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

#25
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

[deleted]

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

#26
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

I also had to do that sometimes... but it make your code a lot more complex if you use it a lot.

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

#27
I've found border-box to be especially helpful with mobile layouts. I can set the width of my text inputs to 100% and not worry about weird side-scrolling breakage. And of course save time by not having to specify widths for the inputs. or max-widths or whatever.
Post reply on HN