CSS Calc() - Multiplication and Division with Unit-Ed Values

CSS calc() - Multiplication and Division with unit-ed values

In CSS calc() division - the right side must be a <number> therefore unit based values cannot be used in division like this.

Also note that in multiplication at least one of the arguments must be a number.

The MDN has great documentation on this.

If you'd like a better way to do calculations you can use a preprocessor (I like Sass). That link will take you to their guides (on that page there's a section about operators).

A calc() value within a calc() value

For the sake of completeness, I will add an answer here (The solution has already been posted in the comments underneath the asker's question).

You don't need to use two calc() statements. It's sufficient for you to combine the calculations within one calc() statement. In this case, as Andrea Ghidini mentioned in a comment (refer to this link), the division will take precedence over the subtraction (basic math rules apply!).

So your solution would be:

width:calc(100% / 3 - 2px)

Also, make sure that additions and subtractions are surrounded by whitespaces, otherwise it will not work!

CSS calc() for inverse width isn't working

Solution is so simple it's mind-boggling. Move the 500px into the first part and subtract the width.

width:calc(650px - 100%);

Gets wider as its parent gets narrower.

Updated fiddle

---

Related Topics