商品一覧ページで横並びにする(2.13)

list.tpl内のdiv.list_areaが商品ひとつの塊となっている。
そのため、contents.css内にあるdiv.list_areaに対して、float: leftとwidthを設定すれば、商品一覧ページで商品を横並びで表示させることができる。
ただ、これだけだと各list_areaの高さがまちまちのため、並び方がガタガタになる場合もある。
希望としては

<div class="list_are_wrap clearfix">
  <div class="list_area"></div>
  <div class="list_area"></div>
  <div class="list_area"></div>
</div>
<div class="list_are_wrap clearfix">
  <div class="list_area"></div>
  <div class="list_area"></div>
  <div class="list_area"></div>
</div>

みたいにしたい。(3つ並べる場合)
最終的にはこうなった。
list.tpl

:
<!--{assign var=id value=$arrProduct.product_id}-->
<!--{assign var=arrErr value=$arrProduct.arrErr}-->
<!--▼商品-->

<!--{if $smarty.foreach.arrProducts.iteration === 1 || $smarty.foreach.arrProducts.iteration % 3 === 1}-->
<div class="list_area_wrap clearfix">
<!--{/if}-->

<form name="product_form<!--{$id|h}-->" action="?">

:

</form>
<!--▲商品-->

<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->
</div><!-- END .list_area_wrap-->
<!--{/if}-->

:

content.css

div.list_area {
	float: left;
	width: 33%;
}

以下解説メモ。
▼商品以下のif文は、list_areaを3個ずつ内包するlist_area_wrapを作成するもの。
foreachでぶん回す商品データのループ1回目あるいは3で割ったときに余りが1の時に挿入する。
つまり、1つめ、4つめ、7つめ…のlist_area記述前に入るもの。
▲商品以下のif文は、上記list_area_wrapを閉じるタグ。
ループ回数を3で割った時に余りが0の時、あるいは最終ループの時に閉じるタグを挿入する。