csscss-calc

Using modulus in css calc function

Is there any way to use or implement modulus operator in css calc function?
I know there is mod operator and IE supports it, but what about other browsers?

For example

#element-id{
     width: calc( 100%  mod 5 );
}
Solution

  • Update 2025:

    This is now possible using the mod function (see https://developer.mozilla.org/en-US/docs/Web/CSS/mod)

    Example:

    #element-id{
  width: mod(100%, 8%); /* Will result in 4% */
}

    Original, outdated answer:

    Unfortunately, there is no more mention of the mod operator in recent specs.

    The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

    You may want to resort to using javascript to achieve such behaviour.

    var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';