例えば、
<div class = "A">
<div class = "B">〜</div>
<div class = "C">〜</div>
</div>
(〜はなんかいっぱい文字)
みたいな感じになってて・・・
.A {
margin: 0;
padding: 0;
whidth: 200;
background-color: #fff;
}
.B {
margin: 0;
padding: 0;
whidth: 50;
float: left;
background-color: #000;
}
.C {
margin: 0;
padding: 0;
whidth: 50;
float: left;
background-color: #000;
}
となってたとすると・・・
IEだとB、Cを含んでAが大きくなって、背景が白くなってくれるのですが、
Firefoxだと含んで大きくなってくれません。
どうやらFloatを使うとB、Cの表示の階層がAより上に行ってしまって
上に飛び出した状態になるようです。
そんな時の解決案は
.A:after {
content: "";
display: block;
clear: both;
}
を加えるといいみたいです。
ただ、Netscape だとこれでも駄目だったので・・・
A のところの記述に
overflow:auto;
を加えると、背景が白くなりました。
しかし、結局のところ Netscape では微妙に表示がくずれてたので・・・
height をキチンと記入してやるのが一番いいみたいですね(汗
<div class = "A">
<div class = "B">〜</div>
<div class = "C">〜</div>
</div>
(〜はなんかいっぱい文字)
みたいな感じになってて・・・
.A {
margin: 0;
padding: 0;
whidth: 200;
background-color: #fff;
}
.B {
margin: 0;
padding: 0;
whidth: 50;
float: left;
background-color: #000;
}
.C {
margin: 0;
padding: 0;
whidth: 50;
float: left;
background-color: #000;
}
となってたとすると・・・
IEだとB、Cを含んでAが大きくなって、背景が白くなってくれるのですが、
Firefoxだと含んで大きくなってくれません。
どうやらFloatを使うとB、Cの表示の階層がAより上に行ってしまって
上に飛び出した状態になるようです。
そんな時の解決案は
.A:after {
content: "";
display: block;
clear: both;
}
を加えるといいみたいです。
ただ、Netscape だとこれでも駄目だったので・・・
A のところの記述に
overflow:auto;
を加えると、背景が白くなりました。
しかし、結局のところ Netscape では微妙に表示がくずれてたので・・・
height をキチンと記入してやるのが一番いいみたいですね(汗




