CSS calc() not working

css

Solution

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.

Problem

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!

Original source

Related problems