Div не регулирует высоту на основе содержимого

Я не могу понять, почему мой info-контейнер div не будет корректировать его высоту в зависимости от его содержимого. У меня есть плавающий div внутри, и я думаю, что это может вызвать проблему, но я не совсем уверен. У меня есть ссылка на jsfiddle, где вы можете увидеть CSS и некоторый HTML, если это поможет. Любая помощь очень ценится!

Вот CSS для идентификатора info-container, содержащего float и всю другую информацию

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

Ответы

Ответ 1

Добавьте overflow:auto; в #info-container.

Пример jsFiddle

Плавающий дочерний элемент удаляет его из потока документов, а родительский падет. Добавив правило переполнения, восстановится желаемое поведение.

Ответ 2

#info-container{
    overflow: auto;
}

Ответ 3

Вам нужно то, что известно как clearfix CSS. Этого можно достичь с помощью следующего CSS.

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

Рабочий пример

Это создаст псевдоэлемент, который заставит оболочку обертывать плавающих дочерних элементов.

Это, возможно, более чистое решение, добавляющее свойство overflow, поскольку свойство переполнения имеет другие виды использования и в зависимости от случая может вызвать проблемы со скрытым переполнением или внутренними полосами прокрутки.

Ответ 4

jsBin demo

Создайте класс CSS:

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

и просто примените его к

<div id="info-container" class="clear">

или любому другому элементу, содержащему плавающие элементы, с которыми вы столкнулись.

Если вы хотите сделать это проще, используйте

overflow : auto;

для любого родительского элемента, содержащего плавающих дочерних элементов, , если вы можете сделать это из-за того, что станет элементом переполнения