CSS calc() rounding

css rounding css-calc
Anorionil picture Anorionil · Sep 19, 2014 · Viewed 9.3k times · Source

This problem is similar to Chrome 37 calc rounding

But the real problem was a bit more complicated, and the solution provided doesn't work for this case:

Result in Chrome: http://i.imgur.com/vNvFfHC.jpg

To explain a bit more: The width of the outerDiv is dependant on random amount of text, which is in another div which is also inside the outerDiv. The left and right divs contain an image, so their width is static.

The current solution we have is to change the calc to: calc(100% - 40px + 1px); Is there any better solution?

Answer

Anorionil picture Anorionil · Mar 18, 2016

This issue was fixed in Chrome some time ago.

https://bugs.chromium.org/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified

Related questions

"width: calc(100% / 3);" not working properly

I have a 3 column layout that should fill the whole screen so on my columns I am using: width: calc(100% / 3); So lets say for example my screen is 782px wide: 782 / 3 = 260.66̅ However the problem I have is in Internet Explorer, where …

Read More
Decimal places in CSS percentage

OK, I've searched far and wide and come up with nothing more than anecdotal evidence to suggest that there is no recommended standard behaviour in the CSS specification for the precision of floating point numbers. N.B. I'm not asking …

Read More
Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

I'm trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible: http://jsfiddle.net/bJKQ6/2/ .column { float: left; width: 25%; } The main container has a …

Read More