Keeping an image within a div

I think this is a float / clear float issue, which I don't have my brain quite wrapped around yet...

Please go to this page, work in progress :):

http://brentwoodvillagemarket.com/index.php?option=com_virtuemart&page=shop.browse&category_id=20&Itemid=80

Whenever there is an image for one of the sandwiches, I need to make sure that the bottom dotted border line has some nice padding after the product image -- if there is an image present..

As you can see, the image for the "Thanks A Lot" sandwich slightly overlaps the bottom dotted line border.  That's my problem .

The "Wise Guy" sandwich doesn't have this problem only because there is some text in the description of the sandwich.

And the sandwiches which do not have images appear to be behaving with nice padding, etc.

They are all within a container called  <div class="s5_browseProductContainer">

So, as I said,  I think the problem may have something to do with floats and clearing floats -- and maybe there needs to be some divs added or rearranged if necessary????

Below is the php code.  I promise not to touch it until you folks are finished here.

Thanks
Rowby

<div class="s5_browseProductContainer">
  <h2><?php echo $product_name ?>  </h2>
    <p ><?php echo $product_price ?></p>
 <div id="rowby-thumb"> <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?><br style="clear:both;" /><div align="center"></div>
   <br style="clear:both;" /></div> 
    <?php echo $product_desc ?>
  <?php echo $form_addtocart ?>
 </div>

Select allOpen in new window