JIKOMAN　blog　-自己満ブログ-

例えば、


＜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　をキチンと記入してやるのが一番いいみたいですね（汗