Фон не показан на DIV с 2 Divs Html

Question

У меня есть «контейнер» DIV, который имеет 2 плавающих DIV с разной высотой внутри, и когда я применяю свойство фона в «контейнере» DIV, он не работает.

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

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

Как я могу показать фон на контейнере (с использованием CSS)?

Answer 1

Добавить переполнение: скрыто; к контейнеру. Например:

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

Answer 2

Вам нужно очистить поплавки.

Добавить этот <br style="clear: both"/> после этих двух плавающих divs.

HTML:

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

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

Существует другая (новая) метода clearfix (with pseudo-classes :before and :after).

Answer 3

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; 
}