An Introduction to CSS3 calc() Function

An Introduction to CSS3 calc() Function:

This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

In our previous posts on CSS Pre-processors, we have discussed how we can calculate length with their special functions. To tell the truth, we can also do similar things in CSS3 with the new function named calc(). In this post, we will see how to utilize this function in the stylesheet.

Using calc() function

As mentioned above, we can use calc() to determine lengths like width, height, margin, padding, font-size, etc. To measure, we can use Mathematical expressions: Addition, Subtraction, Division and Multiplication.
For an example, let’s say, we have three <div> within a wrapper, as shown below.

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

With calc() function, we can easily set these <div> into columns with equal width this way.

.wrapper .col {
 width: calc(100% / 3);
 padding: 0 10px;
}

The following Mathematical operation calc(100% / 3); divides 100% of the parent width by three and here is how it turns out in the browsers. The three <div> are having equal width.

Follow the link below to see it in action.

• View Demo
• Download Source

Additionally, Kurt Maine also shown how calc() function is really useful for creating responsive layout.

A few things to note

There are a few things worth noting when using calc() function.

• First, the calculation is conducted from left to right.
• Division or Multiplication will be calculated first and Math expressions inside parentheses will also be calculated first.
• The calc() is currently not supported in Opera.
• Prefix, -moz- and -webkit-, is needed to cover earlier Firefox and Chrome versions.
• We can use different units for the Operation, for example calc(50% – 10px)
• + and - signs have to be separated with whitespaces, for example calc(100% -5px) will return invalid, as it is only interpreted as percentage followed by negative value. But, whitespaces are not needed for * and / sign.

Final Thought

Prior to CSS3 and CSS Pre-processor, we are limited to fixed type of length. Today, with calc() function we are able to set length in a smarter way and below are a few references to dig into this function further.

• calc() documentation – W3.org
• CSS3 Gems, The calc() function – Site Point
• calc() function browsers compatibility – caniuse.com

Have you tried using this function in your latest website?

Related posts:

1. A Look Into: CSS3 Box-sizing
2. CSS3 Circular and Elliptical Gradients [CSS3 Tips]
3. CSS3 Linear Gradients [CSS3 Tips]
4. CSS3 Repeating Gradients [CSS3 Tips]