Kris Stenglein
Kris Stenglein

Reputation: 31

Unable to confirm why my css calc is invalid

I'm writing a calculation for the left property of an absolutely positioned element. After reading the syntax the only thing I can think of is that I'm trying to multiply two different units but I can't find confirmation for that as I thought the first calculation would have resolved to an integer.

left: calc(1vw * ((100vw / 100) * 1.2));

I need to capture the full size of the viewport so 100vw and then divide it by 100. So if the screen is 1600px this should resolve to 16, then multiply by 1.2 so now it is 19.2 and finally multiply by 1vw to convert it to 19.2vw. The issue I can't confirm is whether the first calculation resolves to an integer (16) or a measurement (16px). If the former then I have no idea why this isn't working. If the latter, how do I get around this?

Upvotes: 3

Views: 92

Answers (1)

A Haworth
A Haworth

Reputation: 36467

See MDN on calc:

Multiplication. At least one of the arguments must be a number.

Your expression is trying to multiply 1vw by another vw amount and hence is not valid.

Upvotes: 2

Related Questions