CSS calc () rounding
This problem is similar to Chrome 37 calc round
But the real problem was a little more complicated and the solution provided doesn't work for this case:
#outerDiv, #leftDiv, #middleDiv, #rightDiv{
height: 100px;
position: absolute;
}
#leftDiv, #rightDiv{
width: 20px;
z-index: 100;
background-color: green;
}
#outerDiv{
width: 100.5px;
z-index: 1;
background-color: red;
}
#middleDiv{
width: calc(100% - 40px);
z-index: 100;
background-color: blue;
left: 20px;
}
#leftDiv{
left: 0;
}
#rightDiv{
right: 0;
}
<div id="outerDiv">
<div id="leftDiv">L</div>
<div id="middleDiv">M</div>
<div id="rightDiv">R</div>
</div>
Result in Chrome: http://i.imgur.com/vNvFfHC.jpg
To explain a little more: The width of the outer DIV depends on a random amount of text that is in another div, which is also inside the externalDiv. The left and right divs contain the image, so their width is static.
The current solution we have is to change the deduction to: calc (100% - 40px + 1px ); Is there a better solution?
+3
source to share