CSS LAYOUT GETS SMARTER WITH CALC()

CSS LAYOUT GETS SMARTER WITH CALC()

It gives you two main features to make layout more flexible: Mixing percentages and absolute values. Mixing sizing units.

#bar {
  height: calc(10em + 3px); 
}

With calc() you can use +, -, * and / to add, subtract, multiply and divide values, allowing all sorts of possibilities. You can use calc() anywhere a CSS length or number can be used. We’re also working on adding calc() for angle and frequency properties soon. The calc() property for lengths is available now in Chrome 19 (Dev channel build) by use of the '-webkit-calc’ property, in Firefox since version 8 using the '-moz-calc’ property and in Internet Explorer since version 9 unprefixed.

http://caniuse.com/#search=calc -

ie>=9.0, all firefox, all chrome, safari >= 6.0