HTML border problems when zoom out with webkit

Question

I have a container div with a fixed width and a border of 1px. It contains two divs which have a fixed width and height and one is floating to the left and the other is floating the right. I use box-sizing: border-box.

An example can be seen here https://jsfiddle.net/joker777/6r9dc5pw/5/

The problem is that the border size increases when I zoom out and it reduces the space inside the container because I use border-box. This has the consequence that there is not enough space for the two floating divs.

Unless there's a reason for the widths of #left-box and #right-box to be set in pixels, I suggest you set widths as percentages to fix this problem. — Dave Snyder

Dave Snyder Dave Snyder · Accepted Answer · 2015-11-21T17:29:15

#container {
    width: 700px;
    border: 1px solid;
    overflow: hidden;
    box-sizing: border-box;
}

#left-box {
    width: 21.7%;
    height: 150px;
    float: left;
    box-sizing: border-box;
}

#right-box {
    width: 78.3%;
    height: 150px;
    float: right;
    border-left: 1px solid;
    box-sizing: border-box;
}

<div id="container">
    <div id="left-box"></div>
    <div id="right-box"></div>
</div>

HTML border problems when zoom out with webkit

1 Answers