CSSの背景の指定

質問

２つのブロック要素を左右に分けて表示しようとしましたが、#contentの内容と#naviの内容が大きさに差がある場合に背景が透けてしまうのですがどうすればよいでしょうか？
僕の予想では、#main_contentの背景が適用されると思ったのですがうまく機能していないみたいです。ここには書いていませんが、bodyに背景画像を入れていて、その画像がボックス内に出てしまうという感じです。
#naviや#contentにheightを指定してやると#main_contentの背景が余白の部分にちゃんとくるのですが、そのページごとにどちらが長くなるか予想できないので余った部分にきちんと指定した色がくるようにしたいです。
(ここでは便宜的に背景色を３色別々にしています。本来はすべて#fffにしようと思っています。)
#main_content {
background-color: #ff0;
}
/*content*/
#content {
float: right;
width: 512px;
background-color: #f0f;
}
#content_inner {
}
/*navi*/
#navi {
float: left;
width: 256px;
background-color: #0ff;
}
#navi_inner {
}

回答No.2

KI401 · ベストアンサー

#contentやらの包含関係をちゃんと示してくれ。
こんな感じだと予想したが、あってるだろうか。
…
. #main_content
. ├#navi
. │ └#navi_inner
. ├#content
. │ └#navi_inner
…

# ID名にアンダーバーってよかったっけ？あまり使わない方がよかったと思うんだけど。

> 余った部分にきちんと指定した色がくるようにしたいです。
上の予想の元。
#main_content{overflow:hidden;}

> floatを使った後はclearする必要があります。[in #1]
そんな決まりはないハズ。
clearを意識するのはもちろん大事だが、意図的にclearしない場合だってあり得る。

お礼

含有関係すみません。。。（汗）
正にKI401さんの予想してくれた通りです。。。

overflow:hidden;で見事に解決しました。ありがとうございます。
解決したのけど、プロパーティーの意味がよくわかりませんでした。ちょっと調べてみます。
ありがとうございます。

回答No.1

noname#83877

floatを使った後はclearする必要があります。

補足

clearでは、空いた部分が埋まらないです。
clearは次のブロック要素で使うもので、ここでのセレクタに適用できないです。