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!
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; }