CSS calc() not working [duplicate]

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!

Tarka · Accepted Answer · 2015-07-29 22:05:41Z

112

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.

edited Jul 29, 2015 at 22:05

Tarka

4,0432 gold badges25 silver badges33 bronze badges

answered Feb 19, 2013 at 21:09

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS calc() not working [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related