Div moves only when zooming out - html

Question

I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.

Answer 1

That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}