CSS/HTML : float left not working when I zoom out the browser

Question

I have a simple HTML like below :

<div id="main_container">
 <div class="floated_box">box 1</div>
 <div class="floated_box">box 2</div>
 <div class="floated_box">box 3</div>
 <div class="floated_box">box 4</div>
 <div class="floated_box">box 5</div>
 <div style="clear: both;"></div>
</div>

and the following css for my html elements :

#main_container {
  width: 400px;
  margin: 20px auto;
  border: 2px solid #cccccc;
  padding: 5px;
}

.floated_box {
  border: 1px solid #990000;
  display:block;
  float: left;
  height: 100px;
  width: 198px;
}

the code above gives me exactly what I want :

however, there is a mirror bug I've found, that is when I zoom out the browser (use ctrl + scroll wheel of mouse), my floated elements are all destroyed, like the image below :

When I delete the css code border for my floated element, the zoom out doesn't destroy the floated elements any more. So I figured out that maybe the border property destroy the floated elements.

How could I do for fixing the bug if I always need the border property for floated elements? Thanks in advance.

Here is the jsfiddle demo

Answer 1

Here's one solution that might work for you.

#main_container {
    width: 100%;
    max-width:400px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 45%;
}

<div id="main_container">
 <div class="floated_box">box 1</div>
 <div class="floated_box">box 2</div>
 <div class="floated_box">box 3</div>
 <div class="floated_box">box 4</div>
 <div class="floated_box">box 5</div>
 <div style="clear: both;"></div>
</div>

http://jsfiddle.net/sk4qm2w5/2/

You might also wanna try which width suits you the best. width: 45%; was only for making the point.

Answer 2

You can use border-box box-sizing to include the border when specifying the width of the elements:

#main_container {
    width: 400px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 198px;
    box-sizing: border-box;
}

<div id="main_container">
    <div class="floated_box">box 1</div>
    <div class="floated_box">box 2</div>
    <div class="floated_box">box 3</div>
    <div class="floated_box">box 4</div>
    <div class="floated_box">box 5</div>
    <div style="clear: both;"></div>
</div>

An alternative method is to use negative margins to account for the border width:

margin: 0px -1px;

Answer 3

just change width to : 49% : DEMO

 #main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 49%;
}