CSS3 - calc

The calc() function in CSS allows you to do simple calculations. Anywhere that a length or size can be specified you can substitute a calc. This allows you to resolve all those issues where no one unit will give you the exact measurement that you want.

The function allows you to combine two different units in the same measurement by adding or subtracting one from the other.

For example, the following width declaration allows us to define a variable width block that will fill the entire width of the browser except for 150 pixels without having to define a fixed width block to fill the 150 pixel space first.

Examples

width: calc(100% - 150px);

Limitations

All modern browsers implement this property. IE8 is the only popular browser that doesn't.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate