Search code examples
cssexpressioncss-calc

Nested calc operations


Hopefully this is quite simple. I want to use the CSS calc operation to perform two calculations:

I want to set my width to the equivalent of

(100% / 7) - 2

However if I try to perform more than one operation in a CSS calc operation, it fails:

width: calc((100% / 7) - 2);

How can I perform multiple calc operations in one CSS statement?


Solution

  • Apparently you have to assign px or % to all numbers that are not being multiplied or divided.

    width: calc((100% / 7) - 2px);
    

    Well I feel dumb now. Haha.