calc(100% - 500px)
If I have the following markup:
Instead of doing this: (Assuming that the sidebar is 300px wide)
width: calc(100% - 300px);
PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)
I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)
One of my favorite use-cases that border-box solves well is columns. I
might want to divide up my grid with 50% or 20% columns, but want to
add padding via px or em. Without CSSs upcoming calc() this is
impossible unless you use border-box.
NB: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be 100% - width of fixed div, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)
That said, if it is important that the content div's width is actually 100% - fixed div width then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):
1) float the fixed width div
+1, saved me lots of time
@buffer - No, because the default box-model uses box-sizing-content-box which means that if you add padding - the width of your element increases. With box-sizing:border-box the padding is an inner padding and the width of the element remains according to what you set it to be.
How would this change if it was with height instead of width?
Knew it, but didn't think of it. Old android is still common, supports box sizing but not calc. a simple absolute and padding saves the day.