CSS calc() not working

Question

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!

Answer 1

To quote MDN

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(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.