Search code examples
csspercentagemultiplicationcalc

css calc number division

If I use a calculator, 2/3 is 0.6666666667 which is about 67%. 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.

Solution

  • 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);