Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

* { box-sizing: border-box } FTW

paulirish.com

Post reply on HN
Print view View original

51–60 of 90 posts

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

#51

Post by joshuahedlund »

jenius wrote: post #39

I love you Paul Irish. I was just complaining about this exact same issue about 3 days ago and when I found this article I was like YES HE AGREES WITH ME! Especially when dealing with fluid layouts, this guy is a lifesaver

Yes, trying to do fluid layouts with percents and borders is a huge pain without this. Too bad it doesn't work with IE7 as I'm still seeing about 5% market share from there. But at least it's declining fast.

Weird timing - after years of coding I literally found this box-sizing solution today on SO just a couple hours before seeing it here on HN.

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

#52

Post by md224 »

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."

Just wait until you discover Flexbox!

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

#53

Post by shocks »

paulirish wrote: post #50
shocks wrote: post #48

Because I know we all wanted it. http://jsfiddle.net/gSD94/2/ http://jsfiddle.net/gSD94/2/embedded/result/ (great article too!) edit: better link (fullscreen!)

Nice work. I talked about the effect back at http://paulirish.com/2010/my-harmonious-background-canvas/ And the equivalent code is available on Github: https://github.com/paulirish/harmony

Thanks for the code, it's awesome fun to play with. :)

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

#54

Post by rquantz »

rplnt wrote: post #13
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.

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

Prior to IE6 it worked this way all the time. That's why quirks mode was there in later versions.

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

#55

Post by josscrowcroft »

shocks wrote: post #48

Because I know we all wanted it. http://jsfiddle.net/gSD94/2/ http://jsfiddle.net/gSD94/2/embedded/result/ (great article too!) edit: better link (fullscreen!)

To those wondering:

Harmony procedural drawing tool, by mrdoob: http://mrdoob.com/projects/harmony/

dollar recognizer project (draw a star on paul's background!): http://depts.washington.edu/aimgroup/proj/dollar/

inspired by paul's site's implementation, about a year ago, i made a proof of concept captcha thing ("motioncaptcha"): http://www.josscrowcroft.com/demos/motioncaptcha/

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

#56

Post by josscrowcroft »

This article was an eye-opener - I write CSS all the damn time and hadn't even clocked box-sizing yet.

I don't wanna know how many hours I've spent calculating widths-after-padding(-but-wait-it's-different-on-both-sides) and commenting the CSS so other developers know why this element is width: 169px even though the container is 200px...

Not to mention:

    textarea { width:100%; padding:20px; oh shit. }

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

#58

Post by X-Istence »

I wrote about the same CSS with a small plea that CSS 3 be ratified and implemented across all browsers as quickly as possible:

http://personal.x-istence.com/post/2010/04/25/css-3-needs-be...

I was working on my portfolio site (link in my profile) and was frustrated with the CSS layout rules. It makes a lot more sense (at least to me) for the way it works with box-sizing: border-box than what it was previously.

If I were not afraid of having my portfolio site also easily accessible by HR in various different companies (many still with IE 6) I'd have used the experimental tags. Instead I used a work-around.

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

#59

Post by cleverjake »

54mf wrote: post #24
cleverjake wrote: post #4

Earlier quoted context omitted.

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.

oh, without a doubt. I kissed the earth when I found that IE 8 supported border-box, my point was just that there were hacks around the issue before now.

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

#60

Post by masklinn »

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.

> 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.

Not really. Everybody I've known (in about a decade) has felt the IE box model made more sense.

But here's the thing: it wasn't the standard, the standard was not going to change its default box model, and dealing with a single slightly worse box model would always be better than dealing with two completely different box models.

box-sizing is the alternative, and a pretty good one. But I don't think anyone ever read about the differences between the W3C box model and the MSIE box model and thought "wow, the W3C box model makes so much more sense".

Post reply on HN