# An Introduction to CSS3 calc() Function

[series_html5css3]

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.

- 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?