Using the CSS3 Calc() Function

Just when you thought that CSS couldn’t get any better, it did! CSS3 introduced, among its numerous new features, a few quality functions. One of the most versatile is undoubtedly the calc() function. It offers a means of dynamically positioning elements at runtime and promises to change the way web developers approach layout design from this point onwards. In today’s article, I’ll show you a few examples of its many uses.

What’s It Good For?

The calc() function may be employed to determine just about any type of measurement, including width, height, margin, padding, and font-size properties, using a mathematical expression. These may be comprised of numbers, angles, transition/animation times, and other measurable attributes, along with mathematical operators such as addition, subtraction, division and multiplication.

Here’s a formula for setting a margin that is relative to the font size:

#element1 {
  width: calc(50% - 2em);
}

This rule sets all paragraphs’ widths to seventy-five percent of their parent container’s width minus one hundred pixels:

p {
  width: calc(75% - 100px);
  border: 2px solid #000;
}

Now that we’ve gone over the basics, let’s take a look at a few more more complex examples.

Example 1: Create Rows of <DIV> of Equal Height

Take the following five DIVs within a container wrapper:

<div id="container">
  <div class="row one">ROW 1</div>
  <div class="row two">ROW 2</div>
  <div class="row three">ROW 3</div>
  <div class="row four">ROW 4</div>
  <div class="row five">ROW 5</div>
</div>

Suppose that you wanted to assign an equal height value to each row DIV without knowing the exact height of their parent container. To determine this value, we can divide the container’s height by the number of child DIV elements. One of the best features of the calc() function is its ability to mix various units of measurement, such as percentages and pixels. Thus, we can divide the total height of 100% by the number of DIV elements (5) to obtain our answer:

#container {
  height: 500px;
  width: 600px;
}

.row {
    height: calc(100% / 5);
    font: bold 15px arial, sans-serif;
    border: thin solid black;
    padding-left: 10px;
    line-height: 2em;
}

Here is example 1 in CodePen.

Example 2: Handling the Vertical Overflow of a Content <DIV>

The usage of the calc() function comes to us from Chris Coyier, author at CSS-Tricks. He presents a situation where we’d like the content of a block level child element that has been ascribed a height of 100% to scroll when necessary. Unfortunately, we can’t use overflow-y because it only works if the content element itself has a set height that can be overflowed. Moreover, there is a header that is not part of the content DIV, so we can’t make the content element 100% high. Rather, we need to set it to 100% minus the height of the header.

Here is the HTML markup:

<div class="area-one">
  <h2>Calc() is cool</h2>
  <div class="content">
    <p>A lot of content text here...</p>
  </div>
</div>

This is the CSS that sets the content DIV’s height via the calc() function:

.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
  overflow: auto;
}

There’s more CSS code than I included here. You can see it, along with the results in CodePen.

Example 3: Positioning a Child in the Center of its Parent

Centering a DIV horizontally within another DIV is not terribly difficult to do, but placing an element dead center relative to its container element takes a little more doing. In the past, this required some crafty application of margins. Now we can dispense with those and use calc() to set the left and top values dynamically.

Here’s the HTML and CSS:

<div id='parent'>
  parent
         <div>child</div>
</div>

#parent {
        position: relative;
        border: solid 4px black;
        width: 300px;
  height: 200px;
        font: bold 1em/2 arial;
        text-align: center;
  background: #0066CC;
}

#parent > div {
        position: absolute;
        top: calc(50% - 2em);
  left: calc(50% - 2.5em);
        width: 5em;
  height: 4em;
        background: #00CCCC;
  border: solid thin black;
}

Take a look at the result in CodePen.

Browser Support

As reported by caniuse.com, calc() is supported by all of the latest major browsers except for Opera mini. Having said that, caniuse also reports several known issues, including browser crashing in IE10 and lack of support in certain instances.

Conclusion

The CSS3 calc() function can help make our content more responsive than with previous versions of CSS. In fact, it promises to become even more powerful when used with the new CSS variables. However, there are still some limitations. In cases where you want to trigger changes to CSS properties from an event or need to reference an element’s attributes, you’d still be better served by using JavaScript.