Images Overlap when window size decreases - html

Question

Thanks for all of your help on my previous question! However, I noticed a small issue- It's not too important, I just wanted to know if there's a way to fix it. As the browser window gets smaller, the images start to overlap. I'd like the images to stop when they're 5px away from each other.
Could someone look over my code and make sure I'm not doing anything wrong with my HTML/CSS?
The HTML is this:
<div class="content">
<div class="listingThumbLine">
<div class="modelListing left">
<a href="modelOne.html">
<img src="modelOne.jpg" alt="Model One" class="modelThumb" id="modelOneThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing right">
<a href="modelTwo.html">
<img src="modelTwo.jpg" alt="Model Two" class="modelThumb" id="modelTwoThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing center">
<a href="modelThree.html">
<img src="modelThree.jpg" alt="Model Three" class="modelThumb" id="modelThreeThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
</div>
</div>
The CSS is this:
body{
background-image:url('bg.jpg');
background-repeat:repeat-x;
font-family: Arial;
color:#B5B5B5;
text-align:center;
}
.content{
font-size:1.25em;
margin:10px 100px;
}
img.modelThumb{
width:225px;
height:225px;
}
.left{
float:left;
position:relative;
}
.right{
float:left;
position:relative;
}
.center{
float:left;
margin: 0 auto;
}
.modelListing{
width: 33%;
text-align: center;
}