Many DIVs inside parent DIV, CSS height issue - css

Question

I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using..
#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;
}
I have tried height: auto and that hasn't done anything. Here is what I am trying to style:
<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>
Thanks!

Answer 1

Give your wrapper div an overflow: auto; so it contains the floated children correctly, like this:
#galleryBox {
overflow: auto; /* Only addition to your current styles */
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
This requires no HTML changes, just the style should do.

Answer 2

You need a clearfix
Add the below code to your css file and set the class of #gallerybox to 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