itsmikem itsmikem - 6 months ago 26
CSS Question

CSS calc() not working

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!

thanks,
Michael M.

Answer

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.