Цвет фона не отображается в обертке

Question

Почему-то #CCC-фон (100% -ная ширина) не отображается вместе с моим кодом ниже. Вы знаете, почему? Tks

http://jsfiddle.net/DzaCq/5/

.wrap100pc { 
    width: 100%; 
    margin: auto; 
    background: #ccc; 
} 

#bottom-left { 
    float: left; 
    width: 490px;; 
    background: #5421c2; 
    height: 300px; 
} 

#bottom-right { 
    float: right; 
    width: 490px;; 
    background: #2ec4a6; 
    height: 300px; 
} 

.clear:after { 
    clear: both; 

} 


<div class="wrap100pc clear"> 
<div id="bottom-left">bottom-left</div> 
<div id="bottom-right">bottom-right</div> 
</div> <!-- End DIV Wrap100pc Clear--> 

Answer 1

Чтобы получить фон назад, добавить overflow:auto к вашему #wrapper дел.

.wrap100pc { 
    width: 100%; 
    margin: auto; 
    background: #ccc; 
    overflow:auto; 
} 

jsFiddle example

перемещаемых дети дивы имеет свой собственный контекст форматирования блока и претендует переполнение: авто (или скрытые) производит результат, который вы ищете. Для углубленного ответа о контексте форматирования блока, см How does the CSS Block Formatting Context work?

Answer 2

Вам просто нужно добавить float:left к обертке тоже:

http://jsfiddle.net/DzaCq/3/

.wrap100pc { 
    width: 100%; 
    margin: auto; 
    background: #ccc; 
    float:left; 
} 

EDIT: Если вы не хотите, плавали , другой ответ, используя overflow, будет работать так же хорошо.

Answer 3

Нет необходимости добавлять overflow:auto в div#wrapper. Ваше определение .clear не исправляет .wrapper height.

Изменение его:

.clear:before, 
.clear:after { 
    content: " "; 
    display: table; 
} 

.clear:after { 
    clear: both; 
} 

решает вашу проблему.

DEMO

Answer 4

Вы должны указать height для .wrap100pc.

Надеюсь, что это поможет!