Safe calc usage in CSS

Published on 01/1/2020 , last <a href="#update" title="View update">updated</a> 01/2/2020 | 1.01.12020 HE

calc is a great CSS function to calculate values, e.g. margins or widths. What makes it especially great is that it can combine different values, for example calc(100% - 4rem - 1px) is valid and works in modern browsers - in simpler words: Calc works with different units like em, %, px, etc.

The problem with calc is that if it doesn’t work you may get a unexpected result. Take the following code for example:

.author {
    padding: 4rem 2rem;
    width: calc(100% + 4rem + 2px);
    margin-left: -2rem;
    margin-top: 2rem;
}

This code calculates the width of the element by taking into account the paddings and borders, then offsets the element to the left (margin-left: -2rem) so it appears to be full-width. If calc does not work, the element will just be moved to the left and appears off-center - it looks wrong and unexpected.

A more robust version is to also calculate the offset. This version is shown below:

.author {
    padding: 4rem 2rem;
    width: calc(100% + 4rem + 2px);
    margin-left: calc(0rem - 2rem - 1px);
    margin-top: 2rem;
}

If calc does not work, both the width and margin-left are ignored and the box appears just as any other content would, without any offset to the left. The interesting part is the second calc:

.offset-example  {
    margin-left: calc(0rem - 2rem - 1px);
}

By using 0rem - 2rem we can create a -2rem offset to the left. The 1px is the border around the parent element which appears on both sides, so we add that to our calculation to stay within the border - otherwise it would look wrong again.

Update

Due to changes during development, the changes described here are not available on my website.