Многие 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; 
} 

Я пробовал высоту: авто и это ничего не сделано Вот что я пытаюсь стилизовать:

<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 a 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:

Link