<calc>

Allows you to perform calculations when specifying CSS property values. You can mix different units, like percentages and pixels, in the same expression.

/* Usage Example */
.container {
  width: calc(100% - 80px);
  /* mixes percentage and pixels */
}
Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

26+
16+
7+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC