Фоновый цвет с плавающими элементами

Question

У меня есть проблема, пока я хочу поставить 2 вертикальных DIV внутри основного DIV. Значение background-color не работает для основного DIV. Я думаю, что мне нужно увидеть некоторые разделы с красным цветом фона.
Пожалуйста, взгляните на его jsFiddle и помогите мне решить проблему.

Answer 1

Попробуйте добавить пустой div с атрибутом CSS clear:both или установить высоту в ваш основной 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 
} 

See Demo

Answer 2

Это потому, что ваш родитель DIV не имеет высоту. Вы устанавливаете дочерние DIVs для плавания, чтобы он не влиял на размер родительского DIV. Вам нужно будет вручную установить высоту для родительского DIV или использовать clear: both; attribute