htmlcsscalc

CSS Calc() using two pixel amounts to get a percentage

I want to do basic calculations in CSS to get a responsive layout.

Is it possible to get a % output from a basic equation, e.g. can I get the width in the below example to be set to 72%?

width: calc(540px / 750px);

This would make the audit trail in my work easier to follow as a number of percentages will be odd, e.g. 13.33333333% etc.

Thanks

Solution

  • You need to pass a % unit, than the desired integer values 

    div{
  background:red;
  height:24px;
  width: calc(100% * (540 / 750));               /* 72% */
}
    <div></div>