Using The CSS calc() Function

You may ask what the calc() function is - well, it's basically an element that allows calculations to be completed within the CSS.

A basic example:

.col-1-2{width:calc(100%/2);}

The example above tells the class to have a width of 100% divided by 2, which as we know gives a result of 50%. You could of course simply right in 50%, but if you need to do other calculations that could combine percent, em and pixel, calc is the better solution.

Trying to get the math correct when converting elements and then putting all of them back together is a nightmare, that's where Calc() plays a major role - Calc() does all of the work for you.

Calc() can be used anywhere where numerical values are used e.g. font-size, background-position, margin, padding, the list goes on.

Complex Example

The following example is based on our latest work, it is part of a working grid system solely based on the Calc() function, which was created as a test case to replace one of our current systems.

The example won't contain tons of elements to clear floats etc., it's there to simply demonstrate the use of Calc() and not to completely demonstrate the grid system.

What we want to accomplish is the mathematical equivalent of the following hard coded styles:

.col-1-4, .col-2-4, .col-3-4{display:block; float:left; margin:0 0 0 30px;} .first{margin-left:0;} .col-1-4{width:22.69938650306748%;} .col-2-4{width:48.46625766871166%;} .col-3-4{width:74.23312883435584%;}

Step 1.

We simply duplicate the code from above and remove all of the width sums:

.col-1-4, .col-2-4, .col-3-4{display:block; float:left; margin:0 0 0 30px;} .first{margin-left:0;} .col-1-4{} .col-2-4{} .col-3-4{}

Step 2.

We create the elements in the HTML source code:

<div class="col-1-4 first">First</div> <div class="col-1-4">Second</div> <div class="col-1-4">Third</div> <div class="col-1-4">Fourth</div>

Step 3.

To start with we need to know exactly what we want to do - in our case, we want to split an element into three, but we can't forget that the each element has a margin of 30px.

To find out what one element is we use the following equation:

calc((100% - (3 * 30px)) / 4)

Breakdown to understand what the equation does:

(100% - The total width of all our elements without any margins, padding borders etc.

(3 * 30px)) This equation is to find out the sum of the individual margins - we require 3 margins, each margin is 30px wide, hence 3 × 30px. Why only three, because we remove one margin from our first element in the row using the class "first" (as can be seen in our HTML code above).

(100% - (3 * 30px)) Here we subtract the total value of the margins from the total width of all elements = 100% - 90px

((100% - (3 * 30px)) / 4) Now that the margin has been calculated and removed from the 100%, the result is divided into the required four elements.

Click here to view the notes about nested brackets

Just to clarify - there are now a number of nested brackets - the nesting ensures that the math is correctly figured out. If the individual sums were not nested we would have something like this:

(100% - 3 * 30px / 4) This would give us a false result as the math is wrong, here it would calculate 100% minus 3 multiplied by 30px divided by 4.

((100% - (3 * 30px)) / 4) This is correct and says: 100% minus 90px divided the result by 4.

As with any Grid system, we don't just use single elements, we use multiple elements e.g. ¼, ½, ¾

To work these elements out we use the base element - i.e. a single element

A single element in our example (¼) looks like this: calc((100% - (3 * 30px)) / 4)

Click here to view the code for a ½

calc((100% - (3 * 30px)) / 4 * 2 + 30px)

The addition is:

* 2 + 30px This says multiply the result of the single element by 2 and add 30px (1 margin width) to the end result.

The HTML source code would look like this:

<div class="col-1-4 first">Quarter</div> <div class="col-1-4">Quarter</div> <div class="col-1-2">Half</div>

As two quarters and a half are technically speaking the same, we only need to use one of the two classes either "col-1-2 or col-2-4" but that is personal preference.

Click here to view the code for a ¾

calc((100% - (3 * 30px)) / 4 * 3 + 2 * 30px)

The addition is:

* 3 + 2 * 30px This says multiply the result of the single element by 3 and add 2 × 30px (2 margin widths) to the end result.

The HTML source code would look like this:

<div class="col-1-4">Quarter</div> <div class="col-3-4">Three Quarters</div>

In both of the examples above, we add the individual required elements together and the no-longer used margin width back to the new elements overall width.

Conclusion

As with every new element that comes into a CSS or HTML draft, they are new and not fully supported. In some cases new elements are removed shortly after introduction.

Calc() is still in the working draft and as stated on the W3.org website, it may be removed during the CR period.

As of publishing this document Opera does not support Calc and Safari needs a prefix, there are also a wide range of Mobile browsers that don't support Calc().

To use Calc() in some older browsers you need to use a browser specific prefix e.g. FireFox: -moz-calc() or Webkit browsers such as Safari or Chrome: -webkit-calc().

All said and done - If you want to use it great, but the support is still not 100% there - if Calc() becomes a permanent part of CSS, we can use it to save us a lot of time when calculating mixings of different dimensions.