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.

Sourabha Sahoo , Sr. Developer, Mindfire Solutions.