itsmikem itsmikem - 1 year ago 110
CSS Question

CSS calc() not working

Is there a limit to how many operands you can have within a CSS


This works:

div {

This does NOT work:

div {

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!

Michael M.

Answer Source

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.