css - なぜフロートドロップ？

Question

シンプルなCSSレイアウトがあります

wrapper
header
left-sidebar / main-content / right-sidebar
footer

しかし、メイン コンテンツがドロップ (フロート ドロップ) しているようで、その理由がわかりません。

私はそれをフィドルに設定しました-フィドル

float:leftdivからを削除することでドロップしないようにすることはできますが、main-contentなぜそうなのかわかりません。コンテナー (ラッパー) には float:left があり、これが「フロート ドロップ」を回避する方法だと思いました

私は左のサイドバーとラッパーに float:left を設定しているので、メイン コンテンツの div に float:left を設定すると、メイン コンテンツが左のサイドバーにちょうど並ぶと思いました。

Answer 1

divから右マージンと左マージンを削除するmain-contentと、float が適用された状態で (当然のことながら) 正常に動作することがわかります。デモ

幅が広すぎて親のサイドバーに沿って収まらないため、ドロップダウンします。

main-contentただし、問題は幅を に設定していて、それをDemo500pに変更していることだと思います500px.

Answer 2

#main-contentdiv には適切な測定値が必要です。

#main-content
{
margin-left: 110px;
margin-right: 110px;
float:left;
padding-bottom:150px;
width:500px;
}