サイドバーの列が終わるところにメインカラムが表示されます

Question

私はこれを真剣に考えています。

ヘッダーdivがあり、問題はありません。左側のサイドバーのdivがあり、上のdivがヘッダーまでぴったりと合っているように見えます。

次に、メインコンテンツのdivがあります。ヘッダーdivに対して予想されるように表示される画像とh1がありますが、ネストされたdivのナビゲーションまでは大きなギャップが表示されます。ナビゲーションはメインコンテンツのdivで正しく行われますが、このdivの上部は常にサイドバーのコンテンツの下部に揃えられます。

私は、クリア：左とその両方と浮動小数点の組み合わせを試しました。 html内でサイドバーdivをメインコンテンツdivの下に移動した場合、メインコンテンツにはギャップはありませんが、サイドバーには大きなトップギャップがあり、メインコンテンツナビが終了する場所の底に並んで表示されます。

私はここで何が不足していますか、事前に感謝します！

Answer 1

問題のあるdivを大きすぎてフィットさせることができる幅（またはパディング、マージン、ボーダー）を設定していませんか？

width: 100%; 
border: 1px solid; 

次に、あなたの要素が100％の幅+ 2つのピクセルを取ります：

はあなたのような何かをしている場合があることに注意してください。

Answer 2

ソースの順序でサイドバーが最初に発生しているようです。

2つのdiv（サイドバー、メイン）が異なる方向にフローティングしている場合は、それらが共有している幅を見てください。パディング、余白、枠線を含む幅の組合せが使用可能なスペースに収まるまで、1つのdivの幅を縮小します（あなたのフロートに幅を設定する必要があります）。 （私は簡潔さのために私の例では幅を使用します）。

私の経験では、ソースオーダーの後に発生するのは、あまりにも多くの幅でそのスポットに滑り込むのを防ぐものです。 #sidebar & #mainContentの

<div id="container"> 
<div id="header">head</div> 
<div id="sidebar">side</div> 
<div id="mainContent">main</div> 
</div> 

幅が広すぎる（#mainContentはダウンバンプます）：#sidebar &の

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:651px;** 
background:red; 

} 

#sidebar{ 
float:left; 
**width:301px;** 
background:green; 
} 

幅容器内部フィット#mainContent：

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:650px;** 
background:red; 
} 

#sidebar{ 
float:left; 
**width:300px;** 
background:green; 
} 

を

btw ... 2つの要素をフローティングした場合同じ方向にあるが、それらの結合された幅が広すぎる場合、ソースオーダーの最後のものが上記の浮動要素の下に収まる。

Answer 3

あなたのh1またはimgに上余白がありますか？それはmainContent divの上部から飛び出し、それを押し下げます。