floatで左右に分けて配置した2個の画像の中央にテキスト

質問

floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。
（NN7、Opera9、Firefox2では表示されるのですが…。）
初心者ですので困っています。お力をお貸し下さい。
↓このように表示したいです。
■■■■　テキスト　■■■■
■画像■　テキスト　■画像■
■■■■　■画像■　■■■■
■■■■　■画像■　■■■■

↓IE6ではこのような表示になってしまいます。
■■■■　テキスト　■■■■
■画像■　テキスト　■画像■
■■■■　　　　　　　■■■■
■■■■　　　　　　　■■■■

■画像■
■画像■

タグは以下のとおりです。

☆HTML☆
<div id="contents01">

<div id="contents01_left">
<img src="img/contents01_01.gif">
</div>

<div id="contents01_right">
<img src="img/contents01_02.gif">
</div>

<p>テキストテキスト</p>
<p><img src="img/contents01_03.gif"></p>
<p><img src="img/contents01_04.gif"></p>
<p><img src="img/contents01_05.gif"></p>

</div>

☆CSS☆
#contents01{
width:480px;
height:140px;
padding:10px;
}

#contents01_left{
float:left;
width:150px;
padding-right:10px;
}

#contents01_right{
float:right;
width:150px;
padding-left:10px;
}

どうぞよろしくお願い申し上げます。

回答No.1

noname#56882 · ベストアンサー

下記ではどうでしょうか。

CSS記述例
#contents01{
width:480px;
height:140px;
padding:10px;
}
#contents01_left{
float:left;
width:150px;
padding-right:10px;
}
#contents01_center{/* 真ん中のテキストと画像の部分 */
float:left;
width:160px;/* #contents01の480pxから（150px×2＋10px×2）を引いた数値 */
}
#contents01_right{
float:left;/* 左へ */
width:150px;
padding-left:10px;
}

HTML記述例
<div id="contents01">

<div id="contents01_left">
<img src="img/contents01_01.gif">
</div>

<div id="contents01_center">
<p>テキストテキスト</p>
<p><img src="img/contents01_03.gif"></p>
<p><img src="img/contents01_04.gif"></p>
<p><img src="img/contents01_05.gif"></p>
</div>

<div id="contents01_right">
<img src="img/contents01_02.gif">
</div>

</div>

お礼

NymphLunaさま

解決しました！
float:left;
を2個指定すると3列出来るのですね。
とても勉強になりました。
ありがとうございます！