Happy new year everyone, good to be back on here.

I had developed a part of a website where a client uploads their stock to the database, and then on choice of category the stock is displayed nicely in rows of three down the page, but as always I didnt take into consideration that some stock will have a longer image which I cant get around and so the row beneath that then gets pushed all out, and its loses its shape.

Basically what I would like to have is that even if say one of the images in the row above makes that stock area longer, the row underneath starts below that one, and continues in a nice row, and so on down the page.

Here is my code, which works fine when all the stock areas are the same, but wondered if anybody can help me with this.

<div id="sub_stock_holder">
  $qw=mysql_query("select * from stock where (sub_Category='$parentcat') and stock_Active=1");
<div class="sub_stock" style="background-color:#990;">
<div class="sub_title"><?=substr($r['stock_Name'],0,62)."..."?></div>
<div class="sub_Image"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="<?=$r['stock_MetaTitle']?>"><img src="./adminSallam/<?=$r['stock_Image']?>" width="210" title="<?=$r['stock_MetaTitle']?>" border="0" style="border:#333333 solid 1px;" alt="<?=$r['stock_MetaTitle']?>" /></a></div>
<div class="sub_Description"><p><?=substr($r['stock_Description'],0,100)." ..."?></p></div>
<? if ($r['stock_Sold'] == "0") { ?>
<div class="sub_Price"><?=$r['stock_Price']?></div>
<? } else { ?>
<div class="sub_Price">SOLD</div>
<? } ?>
<div class="sub_move" style="position:relative; width:100%; margin-top:15px; text-align:center;"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="Click here to view '<?=$r['stock_Name']?>' in full.">click here to read more</a></div>
<? } ?>
The site and its obvious problem is below: