Safe calc usage in CSS

Using CSS `calc` function reasonable and with fallbacks

Published on 01/1/2020 , last updated 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.

Categories

Tags

Like this?

This website contains no advertisement, no tracking, no paid articles, and no shady-things-whatsoever. It is just content, provided free of charge and with accessibility in mind.

If you would like to support me in providing content - and code - for free or if this page has helped you or your company, consider supporting me directly.

You can support me via:

A colorful image of me wearing my DIY mask. The image has a colorful glitch effect.

Kevin Gimbel

is a DevOps Engineer and avid (Video) Gamer. He’s also interested in Sci-Fi, Cyberpunk, and dystopian books.

Wearing a mask is a good idea!

You can find out more about me if you wish.