Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS calc()

DZone's Guide to

CSS calc()

Feeling too lazy to do that long division in your head? Learn how to make CSS do it for you! And, I suppose it could be useful in front-end projects as well.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Ever wondered what in the world the calc() property is? 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 for the use 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 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 CanIUse.com. We can see that the calc() function has a 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.

Afterward, 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.

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.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
css ,web dev ,function ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}