Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox miclaculates CSS calc()

  • 2 replies
  • 2 have this problem
  • 764 views
  • Last reply by cor-el

more options

We are using calc() to calculate the width of columns in a grid with fixed width gutters, but the calculation is off by a weird number and it forces the last column to drop below the rest. At first I thought that this was similar to older IE's rounding errors, but it is not.

Example:

.delivery-slots__slots, .delivery-slots__day {

   width: calc((((100% - 35px ) / 8) * 1) + 0px);
   float: left;
   margin-right: 5px;
   margin-top: 0;

}

... where 100% = 916px (it's a modal with a set max-width) and the last child has the right margin set to zero.

Other broswers (including IE9) correctly calculates this to be 110.125px; Firefox calculates this to be 111px (web inspector) or 110.133px (Firebug) - if you take the values and add them up again, I get 916.064px, which is wider than the parent.

Chosen solution

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

Read this answer in context 👍 1

All Replies (2)

more options

Chosen Solution

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

more options

For reference:

  • Bug 1323735 - Misinterpreting CSS calc()