html - 2 Divs Html の DIV に背景が表示されない

Question

内部に高さが異なる 2 つのフローティング DIV を持つ「コンテナ」DIV があり、「コンテナ」DIV に背景プロパティを適用すると機能しません。

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

http://jsfiddle.net/arthurg/XUmsU/

コンテナの背景を (CSS を使用して) 表示するにはどうすればよいですか?

Answer 1

http://jsfiddle.net/XUmsU/1/

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container{
   height:100%;
   background:red;
  overflow:hidden;
 }

#left{
   width:100px;
   background:green;
   height:30px;
   float:left;
 }

Answer 2

オーバーフローを追加:hidden; コンテナに。このような：

#container{
    height:100%;
    background:red;
    overflow:hidden;
}

Answer 3

フロートをクリアする必要があります。

<br style="clear: both"/>これらの 2 つのフローティング div の後にこれを追加します。

HTML:

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <br style="clear: both"/>
</div>

http://jsfiddle.net/XUmsU/3/

clearfix には他の (新しい) メソッドがあります (疑似クラス:beforeと を:after使用)。