David David - 2 months ago 31
CSS Question

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?

Answer

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.

Comments