It will be great if we can mix the percentage units with absolute units in CSS layout to specify sizes of elements. For example to specify 50% width plus an additional width of 10 or 20px. We can do it by using calc() property.

Example:

#calc{
  width: calc(100% - 100px);
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: -o-calc(100% - 100px);
}
 
<div id="calc">100 pixels less than the available width</div>
 

We can also combine different measurement units(“em”+”px”) using calc()propery.

Example:

 
#calc{
  height: calc(10em + 5px);
  height: -webkit-calc(10em + 5px);
  height: -moz-calc(10em + 5px);
  height: -o-calc(10em + 5px);   
}

*Using calc() we can also use +, -, * and / to add, subtract, multiply and divide values.
*The calc() property works in Chrome 19 by using the “-webkit-calc” property, in Firefox since version 8 using the “-moz-calc” property and in Internet Explorer since version 9 by using “calc” property.