Getting background to stretch to full height of contents - html

Question

My codepen
http://codepen.io/leongaban/pen/sBvfL
So having a strange issue, I'm trying to get the background of the #portfolio div to stretch to contain the thumbnails below which are in an ul list inside of the portfolio div.
However 100% or auto doesn't affect the height. I have to set a static height, like 1000px. To get the background to cover the thumbs. However I'm trying to not set a static height since the thumbnails will get longer.
Perhaps I've been coding this too long, how would you code this?
HTML
<div id="portfolio">
<div class="portfolio-nav">
<h1>Portfolio</h1>
</div>
<div id="showcase-holder">
<div id="showcase-div">
<ul id="portfolio-thumbs">
<li>
<a href="/portfolio/chipestimate">
<img class="role-thumb" src="http://leongaban.com/images/thumb_chipestimate.jpg" alt="ChipEstimate"/>
</a><p>ChipEstimate</p>
</li>
<li>
<a href="/portfolio/shabang" title="Shabang">
<img class="role-thumb" src="http://leongaban.com/images/thumb_shabang.jpg" alt="Shabang"/>
</a><p>Shabang</p>
</li>
</ul>
</div>
</div>
CSS
body {
background: brown;
}
#portfolio {
position: relative;
width: 100%;
height: 50%;
background: #fff;
border-top: 2px solid #ccc;
z-index: 1;
}
#portfolio ul { list-style: none; }
.portfolio-nav { margin: 0 0 20px 0; }
.portfolio-nav h1 {
padding: 30px 0 10px 0;
text-align: center;
font-size: 2.5em;
font-weight: 700;
color: #d74927;
text-shadow: 1px 1px #ccc;
}
#showcase-holder {
position: relative;
width: 80%;
height: 100%;
margin: 0 auto;
border-bottom: 2px solid #ccc;
}
#portfolio-thumbs {
position: relative;
float: left;
list-style-type: none;
margin: 0 0 40px 0;
padding: 0 0 0 5%;
width: 100%;
height: 100%;
}
#portfolio-thumbs li {
position: relative;
float: left;
width: 20%;
margin: 1%;
text-align: center;
padding: 5px 5px 15px 5px;
background-size: 100% auto;
overflow: hidden;
background: white;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
transition: background .3s;
}
#portfolio-thumbs li:hover {
color: #fff;
background: #d74927;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
#portfolio-thumbs li a {
color: #333;
text-decoration: none;
}
#portfolio-thumbs li p {
padding: 10px 0 0 0;
}
#portfolio-thumbs li img.role-thumb {
width: 95%;
min-width: 170px;
padding-top: 5px;
}

Answer 1

Parents will normally expand to the height of their children, though won't in case the children are relative.
You can remove positions and floats to accomplish expanding.
In order to expand a parentdiv based on positioned children try overflow: auto; on #portfolio. This will make #portfolio expand to the height of its children. As seen on this fork of your example.
overflow: auto; will actually let your browser decide, which normally renders this to overflow: hidden;. Though I tend to use overflow: auto; to prevent issues with scrollbars as the page possibly expands later on.

Answer 2

You have added float to your li elements, which means that the parent will not expand to contain these elements.
You can work around this by adding a clearing div.
<div style="clear:both;"></div>
after the showcase-holder div.

Answer 3

Adding overflow: hidden to both #showcase-div and #portfolio-thumbs should do it for you.
http://jsfiddle.net/5SFFP/