Create Smarter Layout with CSS calc() Function

A web page always start with specifying size of an element, that’s why its always been a most anticipated feature to calculate size of an element with ease. Well here is a new addition to CSS3 Values as a new function calc() allows you to define element size using custom method. You can perform calculation for any CSS property which supports lengths in expressions. For example, take a look at following syntax:

<style type="text/css">
#test{
   border:1px solid rgba(0,0,0,0.4);
   width:400px;
   padding:0px 10px;
}
#test p{
   width: -webkit-calc(350px - 50px);
   background:#f0f0f0;
   padding:5px;
}
</style>
<div id="test">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Using this code produces the following result:

Don’t forget to use -vendor prefixes to make it work, for Google Chrome and Safari you should use -webkit and for Mozilla Firefox you should use -moz. With calc() function you can use any of the following arithmetic operators:

Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)

Please not that if you using * or / you must not define a value to the length, otherwise it won’t work. For example:

#test p{
   width: -webkit-calc(350px / 5);
}

You can use CSS calc() function anywhere a length or number can be used. In near future there will be more properties added to calc() but as of now it supports only these. When it comes to browser compatibility, current stable version of Google Chrome 18 doesn’t supports it, but Chrome Canary 19+ supports it very well. Mozilla Firefox also supports it but don’t forget to use -moz prefix before calc(). Let me know what do you think of new CSS calc() function and how do you plan to use it?

Please note that calc() function doesn’t works in current stable of version of Google Chrome, you can use Chrome Canary or latest version of Mozilla Firefox to check out this function.