CSS calc() Function

The CSS calc() function allows you to use calculations within your CSS property values.

The calc() function can be used in place of other unit types when setting widths, heights, angles, frequencies, etc. The actual value that the browser uses will be a result of the calcuation performed by the calc() function.

Here's an example of how the calc() function can be used:

<style>
  nav {
    width: 100px;
    float: left;
    background: gold; 
  }
  article {
    width: calc(100% - 100px);
    float: right;
    background: orange;
  }
  article, nav {
    color: white;
    padding: 30px;
    box-sizing: border-box;
  }
</style>

<nav>
  <h1>Nav</h1>
</nav>
<article>
  <h1>Article</h1> 
</article>

In this example, the navbar is a fixed width while the article takes up the rest of the space — and resizes as you resize your browser.

We give the article element a width of calc(100% - 100px). This calculates into 100 percent of the width, minus 100px (which is the width we gave the nav element). This is because the - (minus operator) subtracts the value on the right from the value on the left.

This ensures that the article element will always take up the remaining width while remaining flush against the nav element. The two elements can now co-exist side by side without any unwanted gaps in between. You can resize the browser as you wish and they will remain flush against each other. The the navbar will remain its fixed width, while the article will resize accordingly.

Without using calc(), this would be very tricky, if not impossible, to implement with CSS alone.

Try changing the above example from calc(100% - 100px) to a percentage value (say 75% or whatever works well) then resize your browser and you'll see what I mean. You'll need to keep updating the percentage value as you resize the browser.

Calculating Margins

Here's another example.

<style>
  nav {
    width: 20%;
    margin-right: 1em;
    float: left;
    background: gold; 
  }
  article {
    width: calc(80% - 1em);
    float: right;
    background: orange;
  }
  article, nav {
    color: white;
    padding: 30px;
    box-sizing: border-box;
  }
</style>

<nav>
  <h1>Nav</h1>
</nav>
<article>
  <h1>Article</h1> 
</article>

This example's similar to the previous one, but this time, both containers use percentages for their widths. This is normally a trivial thing. However, the reason we use calc() in this example is that the navbar's margin uses a different unit (em). So we use the calc() function to deduct the margin width from the article to ensure that the margin doesn't impact on the two containers.

So let's step through the code. The right container has a width of calc(80% - 1em). This calculates into 80% minus 1em. The left container has a right margin of 1em and that's why we subtract 1em from the width of the right container. If we didn't subtract the margin, there wouldn't be enough room for both boxes, and the nav be forced down below the article and its margin.

You can test this by changing calc(80% - 1em) to just 80% and clicking the Run button.

Background Images

You can use calc() to position a background image based on the bottom or right side of the container.

<style>
  html, body {
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  body {
    background-image: url(/pix/samples/bg2.png);
    background-position: calc(100% - 20px) calc(100% - 10px); 
    background-repeat: no-repeat;
  }
</style>

Click Preview to open this example in a new window and you'll see that the background image remains at the bottom right, regardless of the size of the viewport.

In this case we use calc() because the background-position property only allows us to set the position from the top, left of the container. It doesn't allow us to specify an amount from the bottom, right of the container. However, using calc(), the bottom and right edges can be found by using 100%. So it's a simple matter of deducting the desired amount from that figure.

Where else can `calc()` be used?

The calc() function can be used wherever the length, frequency, angle, time, percentage, number, or integer values can be used.

So calc() can also be handy with grids or anything where you need to divide a container into many smaller areas — particularly when using mixed units across various elements and/or properties. It can also be good for calculating widths based on font size and things like that.

Available Operators

The calc() function lets you perform mathematical expressions using the addition (+), subtraction (-), multiplication (*), and division (/) operators.

Official Syntax

The official syntax of the calc() function is as follows:

Also, the addition (+) and subtraction (-) operators must have white space on both sides. There's no such restriction for the multiplication (*), and division (/) operators.

See the official specification link below for more information on the syntax.

CSS Specifications

The calc() function is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.