固定幅が予期せず100％に変更されます

Question

この基本的な問題はわかりません。私は基本的に、紫色の divを黄色の divの隣に配置しようとしています。これらの2つのdivは白いdivで囲まれ、の白の divはの青の divにラップされています。

Iが左黄色と紫 divをフロート場合、白色 DIVは、960ピクセル幅から100％への固定幅を変化させ、青色 DIVは見ることができません。

どのようにこれを修正できますか？私はclear:bothを試したが、役に立たなかった。

/* Footer */ 
 
#footer-wrap{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t background:#039; 
 
} 
 
#footer-content-wrap{ 
 
\t width:960px; 
 
\t height:auto; 
 
\t background:#EDF5F7; 
 
\t margin:0 auto; 
 
} 
 
#footer-left{ 
 
\t width:500px; 
 
\t height:200px; 
 
\t background:#CC3; 
 
} 
 
#footer-right{ 
 
\t width:460px; 
 
\t height:200px; 
 
\t background:#96F; 
 
}

<!-- Footer --> 
 
<div id="footer-wrap"> 
 
<div id="footer-content-wrap"> 
 

 
<div id="footer-left"></div> 
 

 
<div id="footer-right"></div> 
 

 
</div> 
 
</div> 
 

 
</body> 
 
</html>

Answer 1

あなただけの両方の容器にoverflow: auto;を追加して、あなたの要素をフロートする必要があり、問題はあなたがオブジェクトをフロートするとき、容器が失うことになるということです高さは、ここで読むことができます：why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t。ここではfiddleがあなたのコードでオーバーフローが修正されました。コンテナに追加のパディングを追加して結果を確認できるようにしました。パディングを削除すると、それは消滅したように見えます。より明白な結果。

Answer 2

あなたのdivにfloat:leftプロパティを追加することができます。

このpenを参照してください。

CSS：

HTML

#footer-wrap { 
    width: auto; 
    height: auto; 
    background: #039; 
} 
#footer-content-wrap { 
    width: 960px; 
    height: auto; 
    background: #EDF5F7; 
    margin: 0 auto; 
} 
#footer-left { 
    width: 500px; 
    height: 200px; 
    background: #CC3; 
    float: left; 
} 
#footer-right { 
    width: 460px; 
    height: 200px; 
    background: #96F; 
    float: left; 
} 

：

<div id="footer-wrap"> 
    <div id="footer-content-wrap">  
    <div id="footer-left"></div>  
    <div id="footer-right"></div>  
    </div> 
</div> 

Answer 3

あなたがあなたfooter-leftとfooter-right divをフロート、白のdivが960ピクセル幅として100％の幅を取りますが、の合計に等しいですフッター。

I左黄色、紫色divをフロート場合、白色DIVは、960ピクセル幅から100％への 一定の幅を変更し、及び青色DIVは見ることができません。 footer-content-wrapにoverflow: hiddenとの明確なそれを - あなたはフロートをクリアしないがあるため

青のdivがを見ることができませんさ。

下記を参照のデモ：

/* Footer */ 
 

 
#footer-wrap { 
 
    width: auto; 
 
    height: auto; 
 
    background: #039; 
 
} 
 
#footer-content-wrap { 
 
    width: 960px; 
 
    height: auto; 
 
    background: #EDF5F7; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
#footer-left { 
 
    float: left; 
 
    width: 500px; 
 
    height: 200px; 
 
    background: #CC3; 
 
} 
 
#footer-right { 
 
    float: left; 
 
    width: 460px; 
 
    height: 200px; 
 
    background: #96F; 
 
}

<div id="footer-wrap"> 
 
    <div id="footer-content-wrap"> 
 
    <div id="footer-left"></div> 
 
    <div id="footer-right"></div> 
 
    </div> 
 
</div>