教えて！ホームページ作成Q&Aコミュの教えてください！フッタの崩れについて

フッタをブラウザに一杯に塗りのばしたいので、
#containerBottomでくくってから、
#footerを設定しています。

下記の設定にしたところフッタが二重に表示されてしまいました。

#containerBottom{
width: 100%;
margin-top: 20px;
background:#ffffff url("../img/bg_footer.gif") repeat-x;
}

#footer {
width: 940px;
height: 65px;
background-color: #1b1464;
margin: 0 auto;
}

解消法をいろいろ調べてみたところ、　float: left;
が必要みたいだったので、下記のように
#containerBottomに　float: left;　加えて、
さらに、#footerに　clear: both;　をいれてみたところ、
添付画像のような#footerで設定した940px以上のエリアの下に変な白
（塗りのばしが効いていない場所）が出てしまいます。

#containerBottom{
width: 100%;
margin-top: 20px;
background:#ffffff url("../img/bg_footer.gif") repeat-x;
float: left;
}

#footer {
width: 940px;
height: 65px;
background-color: #1b1464;
margin: 0 auto;
clear: both;
}

解決法がわからず困っています。
誰か、どうか、教えてください！！！
よろしくおねがいします。

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 08月25日 03:40

該当部分のHTMLソースを見せてもらえますか？

[2] mixiユーザー 08月25日 11:28

firebug等で、指定の場所のCSSを確認してますか？重複があったりしてません？

[3] mixiユーザー 08月25日 17:59

単純に#footerのheightが65pxにおさまらなくて、#containerBottomの背景画像のheightが足りてないのでは？
背景が単色のようなので、以下のようにすれば白い部分はなくなると思います。

#containerBottom{
width: 100%;
margin-top: 20px;
background-color: #1b1464;
float: left;
}

#footer {
width: 940px;
height: 65px;
margin: 0 auto;
clear: both;
}

ただ、最低限段組はもう一度見直したほうがいいと思います。

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