HTML-контейнер, не укладывающий дочерний div's правильно

Question

Я пытаюсь установить цвет фона моего контейнера div и все его дочерние div's, но я не могу заставить его работать по какой-то причине, и я не уверен, где я. идет не так.

Когда я установил background-color и границу на контейнере, вы можете видеть, что на самом деле это не «содержит» никаких дочерних элементов.

#facility_container{ 
    text-align: center; 
    padding: 2px; 
    width: 100%; 
    background-color: #ffffff; 
} 

Вот JSFiddle демонстрирующее, где я нахожусь до сих пор.

Answer 1

Добавить overflow: hidden в #facility_container, #facility_general_info, #facility_section_info

Float делает внутренние дивы не расширять внешние. Использование настроек таблицы для стилизации вашей страницы - это большое значение no-no в HTML5.

работает jsfiddle: https://jsfiddle.net/nayish/docg128w/8/

Answer 2

Проблема здесь в том, что, так как ваши #facility_info дивы всплывают, их вынимают из нормального потока элементов, и, следовательно, не влияют на ширину или высоту #facility_container div.

Как предложено Jon Ducket in his book HTML & CSS:
Установите свойство переполнения контейнера div в auto и его свойство width на 100%.

#facility_container { 
    text-align: center; 
    padding: 2px; 
    width: 100%; 
    background-color: #ffffff; 
    width: 100%; 
    overflow: auto; 
} 

В этом случае, так как #facility_general_info уже занимает ширину и высоту, не нужен, чтобы установить #facility_container ширину «ы до 100%, но значения вышеупомянутого свойства могут быть используется для элементов, содержащих только плавающие элементы.