CSSテクニックコミュのborder-colorが消える

二度目の質問になります。
申し訳ありませんが、再度ご教授願います。

border-leftを指定したボックス内に
float:right;でボックスを挿入するとborder-leftで指定した
色が消えてしまいます。
IE6では起こらないんですが(画像左)、
Netscape7.1とFireFox1.0.7(画像右)で起きます。
何が問題なのでしょうか？

【テストページ】
http://uruma.moo.jp/css/csstest2.html

【CSS】
*{
margin: 0px;
padding: 0px;
}
img{
border: 0px;
vertical-align: bottom;
}
#container{
width: 800px;
}
#main_area{
width: 800px;
border-left: 20px solid #FA1300;
}
#content{
padding: 20px 0px 0px 39px;
width: 624px;
float: right;
}
#sentences_10{
padding: 15px 39px 15px 0px;
widht: 585px;
font-size: 84%;
line-height: 140%;
}

コメント(5)

最初
全て
最新の40件

[2] mixiユーザー 11月06日 21:49

以下のトピックの現象と同じ理由かとおもいます。

リストを横並びにして余白を塗りつぶす方法
http://mixi.jp/view_bbs.pl?id=2586993

background-colorが反映されない
http://mixi.jp/view_bbs.pl?id=2528105

[3] mixiユーザー 11月07日 23:42

nekoxtuさん、かわち丸さん、お返事ありがとうございます。

＞nekoxtuさん
overflowプロパティで試しましたが、いろいろ考えた結果、かわち丸さん紹介の方法を使うことにしました。

＞かわち丸さん
ほんと同じ現象ですね。大変申し訳ありません。
"親要素は子要素の高さに左右されない"んですね…
:afterの方法を使って解決することにしました。

[4] mixiユーザー 11月08日 00:38

＞"親要素は子要素の高さに左右されない"んですね…
通常の配置方法なら左右されますから、あくまで子要素がフロートであったときって感じです。

[5] mixiユーザー 11月09日 08:23

子要素がfloatの場合ですか。。
ありがとうございます。

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