Do you really need to subtract pixels from percent?
The problem is here from some time on – let’s imagine you have a div, that should be 100% wide, but it also has got some padding, and it fixed width of pixels. Countless developers tried to make the equation 100% – 50px work and failed.
Today we have calc css value, which allows us to perform such tasks, and works pretty well, at least in modern browers.
I see it in use quite often (yes, I do have a nasty habit of checking websites’ source code and css), however I want to talk about underestimated, and often not even noticed, css3 property: box sizing.
Box sizing can have two possible values (except of initial and inherit of course): content-box and border-box. The most important thing about this property is that it makes exactly what we envision when we think about a container that needs to have some percentage width and fixed px padding – it changes the box model, to make the padding count as part of the box width. So, we can simply write:
div { width: 100%; padding: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
And this will do exactly what is necessary (content-box is a default model in which padding and borders add to the box width). Browser support is not the most awesome that I’ve ever seen, but it works for me, and I think it’s a great step towards simple, semantic and down to earth code, and I definitely prefer to use it instead of intricate calc(100% – 3em) solutions.
Another place where usage of the box-sizing property can’t be overrated is form styling. I remember countless hours I’ve been spending trying to make text input fields and dropdowns the same width and height! I usually like to have some padding on inputs, and I really suffered making complex structures field with divs with negative margins to achieve that. Fortunately it’s not here anymore, forcing
box-sizing: border-box
on all elements we want to have equal does the job. Thank you, box-sizing!