Many DIVs inside parent DIV, CSS height issue

Question

Hi everyone,

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

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

Answer 2

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.