Why does this div not grow the div container?

Question

The box

section.box-products {

has all the

section.box-products ul li.item {   

elements in it but even if the <li> count increases the box-products div is not increasing in height.

Why?

Code:

        <section class="box-products">



            <div class="large-12 columns">
                <h2>
                    Noteworthy
                </h2>
            </div>

            <div class="large-12 columns">

                <ul class="large-block-grid-8">


                    <li class="item">
                        <img src="assets/images/item/1.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/2.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/3.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/4.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/5.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/6.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/7.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/8.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/9.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/10.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/11.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/12.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/13.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/14.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/15.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/16.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/17.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/18.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/19.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                    <li class="item">
                        <img src="assets/images/item/20.jpg">
                        <a href="#" class="name">
                            Sofa Bercelli
                        </a>
                        <p>12.95</p>
                    </li>


                </ul>

            </div>

And CSS:

section.box-products {

margin-top: 24px;
padding-bottom: 20px;


/*border: 1px solid red;*/

min-height: 220px;

background-color: #fff;

border-bottom: solid 3px #8A8780;

}

section.box-products h2 {

font-size: 1.3em;
font-weight: 400;

}

section.box-products ul li.item {

width: 120px;
height: 140px;

margin-top: 12px;
margin-bottom: 12px;

/*border: 1px solid red;*/

}

UPDATE:

adding overflow: hidden; fixed the issue!

Thank you!

Answer 1

The children of <section class="box-products"> are floats and, therefore, ignored (when it comes to height) by the parent. One simple way to get the parent to recognize the floated children is like this:

.box-products { overflow: hidden; }