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;
    width: 100.5px;
    z-index: 1;
    background-color: red;
    width: calc(100% - 40px);
    z-index: 100;
    background-color: blue;
    left: 20px;
    left: 0;
    right: 0;

<div id="outerDiv">
    <div id="leftDiv">L</div>
    <div id="middleDiv">M</div>
    <div id="rightDiv">R</div>

Run codeHide result

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?


source to share

1 answer



All Articles