Modded up, but I really hope most frontend folk on HN already know about border-box. Short ver: float two 50% widths beside each other. Change padding as you like later and not have stuff break. I have been doing this for a year now, it's godlike especially for in-browser design.
Border box is also a godsend when dealing with nicely laid out form inputs because unlike elements like divs you can't get away with nesting child elements to get the desired effect, and you typically have borders on those fields. Need a textarea to fill a certain space? Set it to 100% and forget it.
CSS3 Box Model behaviour
11–15 of 15 posts
Re: CSS3 Box Model behaviour
#12Re: CSS3 Box Model behaviour
#13Earlier quoted context omitted.
Border box is also a godsend when dealing with nicely laid out form inputs because unlike elements like divs you can't get away with nesting child elements to get the desired effect, and you typically have borders on those fields. Need a textarea to fill a certain space? Set it to 100% and forget it.
From my understanding most browser use border-box on form elements by default anyway. That's why they often look different from other elements with the same styling.
Re: CSS3 Box Model behaviour
#14Earlier quoted context omitted.
From my understanding most browser use border-box on form elements by default anyway. That's why they often look different from other elements with the same styling.
I don't think so. There are endless blog articles online that have addressed this, e.g. http://davidwalsh.name/textarea-width
Re: CSS3 Box Model behaviour
#15What I've been trying to figure out for years is when/why content-box would be a desirable state of affairs. Most of the time, you know the border-box width (and probably the padding and border) want the browser to figure out the content-width, which is why the standard box model always seemed like a pain, because it makes you do that instead (assuming you're using units where that's even possible). I'm trying to thi…