css calc number division
Solution 1
The problem is with calc(2 / 3)
you will just get a number without an unit. CSS can't display just a number as width. This would be like if you set width: 3
which obviously doesn't work.
If you want the percentage you will need to muliply it by 100%
width: calc(2 / 3 * 100%);
and if you really want the result in pixels multiply it by 1px
width: calc(2 / 3 * 1px);
Solution 2
Use this:
width: calc(100% / 3 * 2);
As far as I know CSS calc doesn't convert fractions to percentages.
Solution 3
Just for completeness, I think this should work as well, just for this case:
width: calc(200% / 3);
Yet untested.
Solution 4
You need to multiply by 100
to convert it into %
div{
background-color: red;
width: calc( (2/3)*100% );
}
<div>yeah</div>
Jens Törnell
Updated on July 28, 2022Comments
-
Jens Törnell almost 2 years
If I use a calculator,
2/3
is0.6666666667
which is about67%
. However if I try to do the same thing with css calc I get an error.width: calc(2 / 3);
Is there a working way for this?
I don't think it looks that good writing it like
0.666666666667
. Any ideas are welcome.