An Introduction to CSS3 calc() Function

By . Filed in Web Design

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.

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.

Have you tried using this function in your latest website?

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement