CSS div position gets messed up on zooming the browser - css

Question

I'm developing a website for Facebook application which is based on grid image layout. The following code works fine for me but when i zoom my browser everything gets messed up. browser with 100% zoom view works. please help me to find some other code if possible or fix the following code.
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
HTML:
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="image1.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="image2.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="image3.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="image4.jpg" alt="PHOTO" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>

Answer 1

I updated the fiddle of Sdghasemi. Added fallback for older browsers without width calculation function and set the image width to 100% and cleaned up the Html a little (closing image tags etc)
The reason that images where flowing out of the container div was the width and height attributes in the HTML. I set it now to 100% of the container. Meaning 100% -2px because of the border. Same with the image caption.
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="http://lorempixel.com/110/90/" alt="PHOTO"/>
</a>
<div class="desc">Add a description of the image here</div>
</div>
css:
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: 24%;
width: calc(25% - 22px);
float: left;
display: block;
overflow: hidden;
text-align: center;
font-size: 100%;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.img img{
width: 99%;
width: calc(100% - 2px);
border: 1px solid #fff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 100%;
width: calc(100% - 10px);
margin: 5px;
}
http://jsfiddle.net/or2ua75e/5/

Answer 2

In this case you have to use CSS's calc() function to calculate the right width of every image on page resize or zoom:
width: calc(24.9% - 22px);
the reason i used 22px: 2 * (margin + border.width + padding) for every image.
and use 24.9% instead of 25 for sure.
See working FIDDLE here