CSSテクニックコミュのボーダーが中身に合わせて広がらない

いつも参考にさせて頂いてます。

下のようなHTMLをCSSで組んでいます。
FireFox・Operaでは正しく表示されるのですが、
IE6及び7でのみ枠線が中身に合わせて縦に伸びてくれません。

floatの閉じ忘れかなと思っても、どうやら違うようで……
どなたか、知恵をお貸し下さいませんか。

.box {
margin-bottom:18px;
width:570px;
}

.title {
margin-bottom:0px;
background-color:#cccccc;
border-right:solid #ff0000 1px;
}

.title h2 {
padding:5px;
font-size:12px;
}

.inner {
padding:10px;
border:solid #ff0000 1px;
}

.list1 {
float:left;
width:180px;
margin-right:2px;
}

.list2 {
float:left;
width:180px;
margin-right:2px;
}

.list3 {
float:left;
width:180px;
}

.clearleft {
clear:left;
}

<div class="box">
<div class="title">
<h2>タイトルタイトル</h2>
</div>
<div class="inner">
<div class="list1">
<ul><li>リスト1a</li><li>リスト1b</li><li>リスト1c</li></ul>
</div>
<div class="list2">
<ul><li>リスト2a</li><li>リスト2b</li><li>リスト2c</li></ul>
</div>
<div class="list1">
<ul><li>リスト3a</li><li>リスト3b</li><li>リスト3c</li></ul>
</div>
<br class="clearleft" />
</div>
</div>

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 11月22日 04:46

css2の仕様みたいですよ
<br class="clearleft" />
を
<div style="clear:both"></div>

にすると中に入るので　私はよくそうします
html汚れますけど

[2] mixiユーザー 11月22日 04:53

＞超不死身さん

ご回答ありがとうございます。
空divは好きではなかったのですが…
仕様とあれば仕方ないですねT_T

ともあれ、助かりました。
お礼申し上げます。

[3] mixiユーザー 11月22日 09:54

空div要素もclear:left用のbr要素も大差ないんじゃないかと思うのですが。

[5] mixiユーザー 11月22日 10:14

.inner {
padding:10px;
border:solid #ff0000 1px;
}

に、height: 1%; を追加すると言うこと聞くようになりましたよ～。

手前みそですが

http://edo-freiheit.sakura.ne.jp/eblog/2006/11/post_9.html

にちょっと書いてます。よかったらのぞいてみてください(*'-')

[6] mixiユーザー 11月22日 10:22

移動中で実機でソース確認していませんので質問の例に直接関係ないかもしれませんが、floatが絡む場合

.floatEnd
{
clear:both;
}

を用意して、<br class="floatEnd">
を回り込みを終了したい箇所に入れています。

回り込みが絡む場合の大概の表示崩れに対応できています。

[7] mixiユーザー 11月22日 11:38

便乗的ですいませんが、何度かこういう質問って出てきてると思うんですが、clearfix系のハックを使った方がいいんですかね？
僕はこういう場合、afterを使ったclearfixでやってるんですが…。

それとclear用のbr要素ってその改行の高さ分、意図しない余白が開いたりしません？

[9] mixiユーザー 11月22日 12:25

私はこれをどこからか（忘れました）仕入れて使っています。
これで大抵間に合っています。

.clear-both {
　　clear: both;
　　height: 1px !important;
　　display: block !important;
　　font-size: 1px !important;
　　margin: 0 !important;
}
hr.none {
　　display: none;
}

<div class="clear-both"><hr class="none" /></div>

[10] mixiユーザー 11月22日 16:10

皆様、レスありがとうございます。
スマートな解決策を見つけることができ、大感謝です！

ログインすると、みんなのコメントがもっと見れるよ