[EC-CUBE] V 2.4.3
[レンタルサーバ] infitoPLUS
[OS] Windows XP
[PHP] Version 5.2.9-2
[データベース] Mysql v 5.0.83
[ブラウザ] Firfox バージョン3.6.2

コチラのコミュの内容も拝見し、や色んなところに質問もしたのですが、一向に問題が解決いたしません。ホトホト困り果てています。
商品詳細画面のサブイメージの配列なのですが、デフォルトの縦表示から横表示にしたいです。<ul><li>を使用して横表示には、なるのですが、左ブロックのメイン画像や右ブロックの説明エリアの文字の長さに影響して、画像表示が崩れてしまいます。画像が詰まって表示されてしまう感じです。
ですので、paddingで指定しても、物によりレイアウトが崩れてしまいます。
clear:bothを使用するとヒントを頂いたのですが、指定場所が悪いのか、うまくいかずにデフォルトの縦表示になってしまいます。
長いプログラムですので、コチラでしか相談出来ません。
●
　●●←現在のサブイメージの配列（サブ画像4つ）
●　

●●●←こうしたいです
●
分かりにくいですが、お願い致します。お知恵を貸してください。

HTML＞

<!--▼CONTENTS-->
<div id="undercolumn">
<div id="detailtitle"><h2><!--★タイトル★--><!--{$tpl_subtitle|escape}--></h2></div>
<img src="<!--{$TPL_DIR}-->img/products/newline7.gif">
<p><!--★詳細メインコメント★--><!--{$arrProduct.main_comment|nl2br}--></p>
<img src="<!--{$TPL_DIR}-->img/products/newline7-3.gif">
<div id="detailarea">
<div id="detailphotoblock">

<!--{assign var=key value="main_image"}-->
<!--{assign var=keyl value="main_large_image"}-->
<!--{if $arrProduct.main_large_image != ""}-->
<!--★画像★-->
<a href="<!--{$arrFile[$keyl].filepath}-->" class="colorbox"rel="example1">
<img src="<!--{$arrFile[$key].filepath}-->"width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>
<p>
<!--★ 拡大する★-->
<a href="<!--{$arrFile[$keyl].filepath}-->" class="colorbox"rel="example1-3" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/kakudaion.gif','expansion01');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/kakudai.gif','expansion01');">

</a>
</p>
<!--{else}-->
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
<!--{/if}-->
</div>

<div id="detailrightblock">
<!--アイコン-->
<!--{if count($arrProduct.product_flag) > 0}-->
<ul class="status_icon">
<!--{section name=flg loop=$arrProduct.product_flag|count_characters}-->
<!--{if $arrProduct.product_flag[flg] == "1"}-->
<li>
<!--{assign var=key value="`$smarty.section.flg.iteration`"}-->
<img src="<!--{$TPL_DIR}--><!--{$arrSTATUS_IMAGE[$key]}-->" width="64" height="19" alt="<!--{$arrSTATUS[$key]}-->" id="icon<!--{$key}-->" />
</li>
<!--{/if}-->
<!--{/section}-->
</ul>
<!--{/if}-->

<!--★商品コード★-->
<!--{assign var=codecnt value=$arrProductCode|@count}-->
<!--{assign var=codemax value=`$codecnt-1`}-->
<div>商品コード：
<!--{if $codecnt > 1}-->
<!--{$arrProductCode.0}-->?<!--{$arrProductCode[$codemax]}-->
<!--{else}-->
<!--{$arrProductCode.0}-->
<!--{/if}-->
</div>
<h2><!--★商品名★--><!--{$arrProduct.name|escape}--></h2>
<!--★価格★-->
<div><!--{$smarty.const.SALE_PRICE_TITLE}--><span class="mini">(TAX INC)</span>：
<span class="price">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->?<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->円</span></div>
<div>
<!--{if $arrProduct.price01_max > 0}-->
<span class="price"><!--{$smarty.const.NORMAL_PRICE_TITLE}-->：
<!--{if $arrProduct.price01_min == $arrProduct.price01_max}-->
<!--{$arrProduct.price01_min|number_format}-->
<!--{else}-->
<!--{$arrProduct.price01_min|number_format}-->?<!--{$arrProduct.price01_max|number_format}-->
<!--{/if}-->円</span>
<!--{/if}-->
</div>

<!--★ポイント★-->
<!--{if $smarty.const.USE_POINT === true}-->
<div> ポイント：<span class="price">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->
<!--{else}-->
<!--{if $arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id == $arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->
<!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->?<!--{$arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->
<!--{/if}-->
<!--{/if}-->Pt</span></div>
<!--{/if}-->

<!--★商品情報★-->
　　<!--{if $arrProduct.size2 != ""}-->
<div id="sizetable">Size：<span class="price"><!--{$arrProduct.size2|nl2br}--></span></div>
<!--{/if}-->
<div>Color：<span class="price"><!--{$arrProduct.comment1|escape}--></span></div>

<!--{* 関連カテゴリ *}-->
<div>関連カテゴリ：
<!--{section name=r loop=$arrRelativeCat}-->
<p>
<!--{section name=s loop=$arrRelativeCat[r]}-->
<a href="<!--{$smarty.const.URL_DIR}-->products/list.php?category_id=<!--{$arrRelativeCat[r][s].category_id}-->"><!--{$arrRelativeCat[r][s].category_name}--></a>
<!--{if !$smarty.section.s.last}--><!--{$smarty.const.SEPA_CATNAVI}--><!--{/if}-->
<!--{/section}-->
</p>
<!--{/section}-->
</div>


<form name="form1" id="form1" method="post" action="<!--{$smarty.server.REQUEST_URI|escape}-->">
<input type="hidden" name="mode" value="cart" />
<input type="hidden" name="product_id" value="<!--{$tpl_product_id}-->" />
<input type="hidden" name="favorite_product_id" value="" />
<!--{if $tpl_classcat_find1}-->
<dl>
<dt>
<!--{$tpl_class_name1}-->
</dt>
<dd>
<select name="classcategory_id1"
style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"
onchange="lnSetSelect('form1', 'classcategory_id1', 'classcategory_id2', ''); ">
<option value="">選択してください</option>
<!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->
</select>
<!--{if $arrErr.classcategory_id1 != ""}-->
<br /><span class="attention">※ <!--{$tpl_class_name1}-->を入力して下さい。</span>
<!--{/if}-->
</dd>
</dl>
<!--{/if}-->

<!--{if $tpl_stock_find}-->
<!--{if $tpl_classcat_find2}-->
<dl>
<dt><!--{$tpl_class_name2}--></dt>
<dd>
<select name="classcategory_id2"
style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->">
<option value="">選択してください</option>
</select>
<!--{if $arrErr.classcategory_id2 != ""}-->
<br /><span class="attention">※ <!--{$tpl_class_name2}-->を入力して下さい。</span>
<!--{/if}-->
</dd>
</dl>
<!--{/if}-->

<dl>
<dt>個&nbsp;&nbsp;数</dt>
<dd><input type="text" name="quantity" class="box54" value="<!--{$arrForm.quantity.value|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" />
<!--{if $arrErr.quantity != ""}-->
<br /><span class="attention"><!--{$arrErr.quantity}--></span>
<!--{/if}-->
</dd>
</dl>
<!--{/if}-->

<!--{if $tpl_stock_find}-->
<p class="btn">
<!--{* お気に入りに追加するボタンを表示させる *}-->
<!--{include file="./products/customer_favorite_products.tpl"}-->

<!--{* カゴに入れるボタン *}-->
<a href="java script:void(document.form1.submit());" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/cart-inon.gif','cart');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/cart-in.gif','cart');">
<img src="<!--{$TPL_DIR}-->img/products/cart-in.gif" width="119" height="31" alt="カゴに入れる" name="cart" id="cart" /></a>
</p>
<!--{if 'sfGMODetailDisplay'|function_exists}--><!--{* GMOワンクリック *}-->
<!--{'sfGMODetailDisplay'|call_user_func}-->
<!--{/if}-->

<!--{else}-->
<div class="attention">SOLD OUT</div>
<!--{/if}-->
</form>

<p class="btn2">
<a href="http://loyal-royal.com/eccube/html/contact/index.php">
<img src="<!--{$TPL_DIR}-->img/products/btn-contactblack.png" width="119" height="31" alt="問い合わせ" />
</a>
</p>
</div>
</div>
<!--{* オペビルダー用 *}-->
<!--{if "sfViewDetailOpe"|function_exists === TRUE}-->
<!--{include file=`$smarty.const.MODULE_PATH`mdl_opebuilder/detail_ope_view.tpl}-->
<!--{/if}-->
<!--詳細ここまで-->

<!--▼サブコメントここから-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<div class="subarea">

<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
<!--拡大写真がある場合ここから-->
<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrFile[$key].filepath != ""}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></div>
<div class="subphotoimg">
<!--{if $arrFile[$lkey].filepath != ""}-->

<ul><li>
<a href="<!--{$arrFile[$lkey].filepath}-->" class="colorbox"rel="example1">
<!--{/if}-->
<!--サブ画像-->

<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
</li>
</ul>
<!--{/if}-->
</div>

CSS＞

/* 商品詳細 */

/* タイトル
----------------------------------------------- */
div#detailtitle {
width: 580px;
padding: 0px 0px 0px 20px;
margin: 0px 0 0px 20px;
background: url("../img/products/gun.gif") no-repeat left center;
}

div#detailtitle h2 {
padding: 0px 0px 0px 20px;
font-style: italic;
font-size: 320%;
color: #ffffff;
}


/* 商品
----------------------------------------------- */
div#detailarea {
width: 580px;
margin: 15px 0 0px 0;
}

div#detailphotoblock {
border: #000000;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float: left;
width: 292px;
}

div#detailphotoblock p {
border: #000000;
margin: 5px 0 0 0;
}

div#detailrightblock {
float: right;
width: 280px;
}

div#detailrightblock li {
display: inline;
}

div#detailrightblock h2 {
margin: 5px 0;
padding: 0;
color: #ffffff;
font-size: 140%;
font-weight: bold;
}

div#detailrightblock dl {
padding: 15px 0 0 0;
}

div#detailrightblock dt {
font-weight: bold;
padding: 0 0 0 15px;
background: url("../img/common/arrow_gray.gif") no-repeat left center;
}

div#detailrightblock dd {
margin: 0 15px 0 0;
}

div#detailrightblock .box54 {
width: 54px;
border: solid 1px #ccc;
}

div#detailrightblock .btn {
margin: 5px 0 0 0;
padding: 10px 0 5px 0;
text-align: center;
vertical-align: top;
background: url("../img/common/line_280.gif") no-repeat;
}

div#detailrightblock .btn2 {
margin: 5px 0 0 0;
padding: 10px 0 15px 0;
text-align: center;
vertical-align: top;
background: url("../img/common/line_280.gif") no-repeat;
}



/* サブタイトル
----------------------------------------------- */
div.subarea {
width: 606px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}

div.subarea h3 {
width: 580px;
font-size: 120%;
margin: 0 0 10px 0;
padding: 5px 10px;
background-color: #e4e4e4;
}


div.subphotoimg {
display: inline;
width: 606px;
}


div.subphotoimg ul {
display: inline;
margin: 0 auto;
}


div.subphotoimg li {
float: left;
display: block;
width: 202px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


単純な事なのかも知れないのですが、解決しません。どうかお力をお貸し下さい。お願いいたします。

もし公開できるのでしたら、URLを貼ったほうがいいかもしれません＾＾；

----------------
EC-CUBE3っぽいテンプレート
GitHub で公開中
https://github.com/bluestylejp

お問い合わせ番号CSV登録&メール送信プラグイン
http://urx.red/qDT6

flealog さん、ご指摘ありがとうございます。

＞もし公開できるのでしたら、URLを貼ったほうがいいかもしれません＾＾；

当方まだ、テスト環境でして完成した後にDSN切り替えを行う予定ですので、まだ公開できるURLが無い状況です。

clear:fixを指定する事で問題が解決できました。
ありがとう、ございました。