Многие DIV внутри родительского DIV, проблема с высотой CSS

Question

Я собираю динамическую фотогалерею и застреваю, пытаясь разместить миниатюры. В основном я пытаюсь поместить каждую миниатюру и подпись в отдельный DIV, всплывающий слева. Миниатюры работают так, как я хочу, но по какой-то причине родительский DIV отказывается покрывать высоту области миниатюр. Вот CSS, который я использую ..

#galleryBox {
    width: 650px;
    background: #fff;
    margin: auto;
    padding: 5px;
    text-align: center;
}
.item {
    display: block;
    margin: 10px;
    padding: 10px;
    float: left;
    background: #353535;
    min-width: 120px;
    }
.label {
    display: block;
    color: #fff;
}

Я пробовал height: auto, но ничего не сделал. Вот что я пытаюсь стилизовать:

<div id="galleryBox" class="ui-corner-all">
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
                <div class="item ui-corner-all">
                    <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
                    <p><span class="label">Testing</span></p>
                </div>
            </div>

Спасибо!

Answer 1

Дайте вашему файлу div overflow: auto;, чтобы он правильно содержал плавающие дочерние элементы, например:

#galleryBox {
  overflow: auto; /* Only addition to your current styles */
  width: 650px;
  background: #fff;
  margin: auto;
  padding: 5px;
  text-align: center;
}

Это не требует никаких изменений HTML, просто стиль должен делать.

Answer 2

Вам нужно clearfix

Добавьте приведенный ниже код в ваш CSS-файл и установите class из #gallerybox в clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

UPDATE :

Ссылка