HTML Border Problems With Float When Zoom Out

I have a div container, which is 800px width, that is separated into two by a single border(1px). div A (399px) is floated left while div B(400px) is float right. The problem is wh

Solution 1:

This problem occurs because the browser is reducing the size of the divs proportionally, but does not apply reducing to the border.

To resolve this try using this css:

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;

The size of the div will be measured with the border and reduced properly when zooming out and you can leave both divs with the width of 400px.

The full code should look simillar to this:

div#container{
    width: 800px;
}
div#container > div{
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div#left{
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;

}

Solution 2:

You could do it like this: http://jsfiddle.net/SNZEK/

If you put one div within another div and add the border size to the parent div. That should work in FF, Chrome and >=IE7

.parent-div { 
    float: left;
    width: 50px;
}
.child-div {  
    width: 48px;
    border: 1px solid black;
}

Solution 3:

Try the following css see if it solve your problem. I have tried it in on IE8 and Chrome and they both work fine. I had setup my test example at jsfiddle.

div#container{
    width: 800px;
}
div#left{
    float: left;
    width: 398px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;
    width: 400px;
}