初心者ですがECサイトを構築中です。

過去のスレッドを見て、商品一覧ページをカスタマイズしています。

3列の横並びにしたところ、商品の高さによって歯抜けになってしまいます。

過去のスレを読みあさっているのですが、解決できません。

ご教示いただけると幸いです。

宜しくお願いします。

http://store.petshopgarage.com/html/products/list.php

CSS
/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
width: 33%;
overflow: hidden;
　　position: relative;
float: left;
}

div.listphoto {
padding: 0px 0 30px 0;
text-align: center;

}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
width: 100%;
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc ,
#two_maincolumn_left div.listrightbloc {
float: left;#script tag escaped#;
width: 100%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
width: 90%;
}

----------------------------
list.php

<!--▼商品-->
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div class="list_area clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>
<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="65" height="14" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>
</div>
</div>
</form>

<!--▲商品-->



<!--{if $smarty.foreach.arrProducts.last}-->
<div style="clear:both;"></div>

例えば、以下のような感じで、float をかけているボックスに、height 属性を加えてはどうですか？

div.list_area {
　　padding: 0 0 30px 0;
　　width: 33%;
　　overflow: hidden;
　　position: relative;
　　float: left;
　　height:200px;
}

高さを可変にするなら

<!--{if $smarty.foreach.arrProducts.last}-->
↓
<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->

とか?

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

seasoftさんのアドバイスで解決しました！

<!--{if $smarty.foreach.arrProducts.last}-->
↓
<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->

本当にありがとうございました！

fukapさんもありがとうございました！


助かりました〜。