Is there a limit to how many operands you can have within a CSS calc() function?
This works:
div {
left:calc((100%/54)*26);
left:-webkit-calc((100%/54)*26);
}
This does NOT work:
div {
left:calc(((100%/54)*14)-140px);
left:-webkit-calc(((100%/54)*14)-140px);
}
Of course, the latter is what I need, because I need to offset a few pixels, but as soon as I try to do that, the value seems to just go to zero. Any insight is appreciated!
To quote MDN
The
+and-operators must always be surrounded by whitespace. The operand ofcalc(50% -8px)for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand ofcalc(50% - 8px)is a percentage followed by a minus sign and a length. The*and/operators do not require whitespace, but adding it for consistency is allowed, and recommended.
Space your stuff out, and it will probably work.
