samanime samanime - 2 months ago 17
CSS Question

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

Is it possible to use calc() to multiply or divide with unit-based values (like 100%, 5px, etc).

For example I was hoping to do something like this:

width: calc(100% * (.7 - 120px / 100%));


Hoping it resolved to something like (assuming 100% = 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);


However after some experimenting it looks like I can't have a unit-based value as the denominator for division.

I also don't seem to be able to multiple two values together like
5px * 10px
or
5px * 100%
.

I know it doesn't make sense in 100% of the cases to allow this, but in my use-case, I'd like to know what percentage 120px is of the overall width, which I then feed in to the rest of my calculation.

Either that, or if someone could figure out a different way to write it, that would work as well. I've racked my brain and couldn't come up with anything.

Answer

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 like will take you to their guides (on that page there's a section about operators).