css - フローティング要素を含む背景色

Question

DIVmain の中に 2 つの vertical を入れたいのですが、問題がありDIVます。このbackground-color値は main では機能しませんDIV。赤い背景色のセクションをいくつか見なければならないと思います。
そのjsFiddleを見て、解決するのを手伝ってください。

Answer 1

clear:bothCSS 属性を使用して空の div を追加するか、メインの div に高さを設定してみてください。

<div id="content">
    <div id="float-left">Some Text floating left</div>
    <div id="float-right">Some Text floating right</div>
    <div id="clear"></div>
</div>

CSSコード

#content {
    background-color:red; /* The background you want */
    width:500px; /* Demo: not important */
}

#float-right {
    float:right;
    width:300px;
    padding-right:20px;
    line-height:200%;
    background-color:#f2f2f2
}

#float-left {
    float:left;
    width:50px;
    background-color:#e1e1e1
}

#clear{
   clear:both
}

デモを見る

Answer 2

親 DIV に高さがないためです。親 DIV のサイズに影響しないように、子 DIV を float に設定します。親 DIV の高さを手動で設定するか、clear:both; を使用する必要があります。属性