Как автоматически изменить размер обёртки div с помощью CSS

Question

Я боролся с этой проблемой ..

Существует div-обертка, и он содержит 3 вертикальных столбца div с полным текстом, и этот div-обертка имеет красный цвет фона, так что он может быть фоном полные тексты.

<div id="content_wrapper">

    <div id="cside_a">
       // massive texts goes here
    </div>

    ... // two more columns go here.

</div>

И вот код CSS для них.

#content_wrapper
{
background-color:#DB0A00;
background-repeat:no-repeat;
min-height:400px;
}
#cside_a, #cside_b, #cside_c
{
float: left;
width: 33%;
}

И этот код дает мне фон, который покрывает только высоту 400px. Я ожидал, что div-обертка автоматически изменяет размеры в зависимости от размер div в нем.

Каким-то образом установка "переполнения: скрытый" с помощью CSS-кода для оболочки делает все нормально .

Понятия не имею почему работает "переполнение: скрыто" ... разве это не должно скрывать все переполненные тексты ..?

Может ли кто-нибудь объяснить мне, почему? Это правильный способ сделать это в любом случае?

Answer 1

Ваша проблема вызвана тем, что ваши столбцы плавающие.Взгляните на ' Clearfix '

Answer 2

вам нужно очистить ваши поплавки. добавьте следующее после третьего столбца.

<div class="clear"></div>

и это к вашему css

.clear {clear:both;float:none;}