Column Layout Grid, need to wrap <div> around <img>

CURRENT:

<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14"><img src="bmz_cache/4/4c68e134e4a56cd4c3548911b73a8987.image.140x87.jpg" alt="Dover Dot 3/4" Designer Matching Collar" title=" Dover Dot 3/4" Designer Matching Collar " width="140" height="87" /></a><br /><h3 class="itemTitle"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14">Dover Dot 3/4" Designer Matching Collar</a></h3><div class="listingDescription"></div><br />$24.00<br /><br /><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14"><span class="more-info">... more info</span></a><br /><br /></div>

WANT TO DO SOMETHING LIKE THIS:

<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14">**<div class="product-image">**<img src="bmz_cache/4/4c68e134e4a56cd4c3548911b73a8987.image.140x87.jpg" alt="Dover Dot 3/4" Designer Matching Collar" title=" Dover Dot 3/4" Designer Matching Collar " width="140" height="87" />**</div>**</a><br /><h3 class="itemTitle"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14">Dover Dot 3/4" Designer Matching Collar</a></h3><div class="listingDescription"></div><br />$24.00<br /><br /><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14"><span class="more-info">... more info</span></a><br /><br /></div>

I think what you want is a span and not a div

<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14">
<span class="product-image">
<img src="bmz_cache/4/4c68e134e4a56cd4c3548911b73a8987.image.140x87.jpg" alt="Dover Dot 3/4" Designer Matching Collar" title=" Dover Dot 3/4" Designer Matching Collar " width="140" height="87" />
</span>
</a><br /><h3 class="itemTitle"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14">Dover Dot 3/4" Designer Matching Collar</a></h3><div class="listingDescription"></div><br />$24.00<br /><br /><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&products_id=14"><span class="more-info">... more info</span></a><br /><br /></div>

either or will work.... i'd even be able to accomplish what i want if i put a class inside (only) the link wrapping the image....

e.g.

<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&am p;products_id=14"** class="product-image"**><img src="bmz_cache/4/4c68e134e4a56cd4c3548911b73a8987.image.140x87.jpg" alt="Dover Dot 3/4" Designer Matching Collar" title=" Dover Dot 3/4" Designer Matching Collar " width="140" height="87" /></a><br /><h3 class="itemTitle"><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&am p;products_id=14">Dover Dot 3/4" Designer Matching Collar</a></h3><div class="listingDescription"></div><br />$24.00<br /><br /><a href="http://maedog.com/shop/index.php?main_page=product_info&cPath=1_17&am p;products_id=14"><span class="more-info">... more info</span></a><br /><br /></div>

and then i'd do something like this (i'd have to tweak this and add some ie hacks to make it work)... this is suppose to create the illusion of having all (square) images the same dimensions.

<style> .product-image { display:block; width:140px; height:140px; text-align:center; border:1px solid #666; } .product-image image { margin-top: 50% } </style>

correction of above code....

<style> .product-image { display:block; width:140px; height:140px; text-align:center; border:1px solid #666; } .product-image **img** { margin-top: 50% } </style>