CSS calc()

Ever wondered what in the world is the calc() property? Well, you’re about to find out!

It can be used for creating layouts in CSS. For this purpose, you can also use the position property.

CSS calc() is used for calculations inside the stylesheet. The calc() function allows the usage of mathematical expressions:

• addition (+),
• subtraction (-),
• multiplication (*),
• division (/).

Being able to do math in CSS is a very useful feature, especially when creating complex layouts.

Preprocessors all have the ability to use math functions, but none are as powerful as the calc() function. Some of the preprocessor abilities include nesting in SASS and LESS.

The main advantage of using the calc() property is the ability to mix different units. For example, you could divide the percentages with a unitless number or subtract pixels from percentages.

The syntax

div {
  width: calc(100% - 30px)
}

The important thing to note is that there must be space on both sides of the operator.

Browser support

The best way to check if any of the CSS properties are supported by browsers is by visiting Can I use. We can see that the calc() function has pretty good browser support, over 94%.

Positioning example

A simple example that demonstrates the power of the calc() function is positioning a div inside a container.

.parent-element {
  height: 500px;
  width: 500px;
  background-color: #C98EED;
  position: relative;
}

.child-element {
  height: 100px;
  width: 100px;
  background-color: #8FC9FF;
  position: absolute;
  left: calc(100% - 300px);
  top: calc(100% - 150px);
}

In this example, we will see how the calc() function helps us position the child element relative to the parent element.

Afterwards, we can give the elements some styling and the text some formatting.

Width example

Another good example might be looking at how to set the width of the element using the calc() function.

.parent-element {
  height: 400px;
  width: 1000px;
  border: solid thin #808080;
}

.first-child {
  background-color: #C98EED;
  float: left;
  margin-right: 20px;
  width: 50%;
  height: 300px;
}

.second-child {
  background-color: #8FC9FF;
  float: right;
  width: calc(50% - 100px);
  height: 300px;
}

This way, the calc() function is used to define the width of the .second-child element using both the percentage and pixel units. This is a good demonstration of the unit mixing abilities of this function.

The conclusion

We hope you learned something new from this article. We have shown you the basics of the calc() function, now it’s time for you to play around with it and unlock its full potential.

Check out other articles about CSS properties such as relative font size and CSS positions.