画像を横並びに2つと、その右側に文字入りのボックス

質問

画像を横並びに2つと、その右側に文字入りのボックスを横並びに2(よこ）×3段（たて）で配置したいのですが、IE7だけ２つの画像の下に、文字入りボックスが3(よこ）×2段（たて）で並んでしまいます。

IE8やそれ以外のブラウザは画像右側に文字入りボックスが2(よこ）×3段（たて）で並びます。
どのようにすれば、IE7も他と同じようになりますか。
よろしくお願い致します。

<div class="imagebox">
<p class="image"><img src="1.jpg" width="145" height="120" alt=""/></p>
</div>
<div class="imagebox" style="margin:0 20px 0 10px">
<p class="image"><img src="2.jpg" width="145" height="120" alt=""/>
</div>
<ul class="box">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
<div style="clear: left;"></div>

div.imagebox {
background-color: #383838;
width: 145px;
float: left;
margin: 0px;
}
p.image {
text-align: center;
margin: 0px;
}
ul.box {
list-style:none;
width:100%;
margin: 0 0 5px 0;
padding: 0;
}
ul.box li {
width: 180px;
height: 14px;
padding: 4px 5px 4px;
border-color: #000033;
border-style: double;
background: #373737;
color: #7e7763;
text-align: center;
float: left;
display: inline;
list-style: none;
margin: 2px;
}

回答No.2

ORUKA1951 · ベストアンサー

IE各バージョンの表示結果を添付するのを忘れてた

お礼

ご回答ありがとうございました。

回答No.1

ORUKA1951

希望されることの意味がわかりません。HTMLもスタイルシートを読んでも、書かれている内容と符合しません。
　実際、UEの各バージョンで試しても添付画像のようにしかなりません。確認のためウィンドウ幅を800px程度にしてみました。

　まずHTMLですが、マークアップはブロック要素が下記の構成なら(要素のグループ化のためのdiv要素を使ってグループ化する＝もちろん意味的にもそうである場合)
　親div
　　画像div
　　　画像1
　　　画像2
　　説明div
　　　説明1
　　　説明2
　　　説明3

<div class="product">
　　<div class="photo">
　　　　<p><img></p>
　　　　<p><img></p>
　　</div>
　　<div class="explanation">
　　　　<div class="caption">
　　　　　<p>説明文</p>
　　　　　<p>説明文</p>
　　　　</div>
　　　　<div class="account">
　　　　　<p>説明文</p>
　　　　　<p>説明文</p>
　　　　</div>
　　　　<div class="price">
　　　　　<p>説明文</p>
　　　　　<p>説明文</p>
　　　　</div>
　　</div>
</div>
　その上で、スタイルシートは
div.product{
　　width:100%;
　　min-width:900px;
　　position:static;
}
div.product div.photo{
　　width:300px;
　　position:absolute;
}
div.product div.explanation{
　　min-height:125px;
　　margin-left:500px;
}
div.product div.explanation div{
　　width:200px;
　　float:left;
}
とか・・

基本は、HTMLを文書構造にしたがって正しくマークアップすること。ついでスタイルシートで見栄えを決めること。