Parent DIV Height to expand based on inner content [duplicate] - html

Question

This question already has answers here:
Expanding a parent <div> to the height of its children
(20 answers)
Closed 8 years ago.
I'm trying to set the height of .background based on the number of .slice elements on the page. I know the inner elements being floated left doesn't help but I'm not sure how to solve this.
JSFiddle
http://jsfiddle.net/8ryAD/
HTML
<div class="master">
<a id="btn-nav">
<span></span>
<span>Menu</span>
<span></span>
</a>
<nav id="main-nav">
<div class="background">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>
</nav>
</div><!-- end master -->
CSS
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
body {
background: #2980b9;
font-family: 'Droid Sans', sans-serif;
}
#btn-nav {
position:absolute;
left:10px;
top:10px;
width:30px;
height:30px;
display:block;
z-index:1;
}
#btn-nav:hover {
cursor:pointer;
}
#btn-nav span:nth-child(2) {
top:10px;
}
#btn-nav span:nth-child(3) {
top:20px;
}
#btn-nav span {
height: 4px;
width: 30px;
background: white;
content: "";
text-indent: -999em;
display:inline-block;
position:absolute;
zoom: 1;
top:0px;
left:0px;
text-align:center;
-webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);
-webkit-transform: rotate(0deg);
}
#btn-nav:hover > span, #btn-nav.open > span {
top:10px;
}
#btn-nav.open > span:nth-child(1) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni .3s .3s forwards;
}
#btn-nav.open > span:nth-child(2) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni-2 .3s .3s forwards;
}
#btn-nav.open > span:nth-child(3) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni-3 .3s .3s forwards;
}
#-webkit-keyframes rotateAni {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(90deg);}
}
#-webkit-keyframes expandAni {
0% {left:0;}
100% {left:-10px;}
}
#-webkit-keyframes expandAni-2 {
0% {left:0;}
100% {left:0px;}
}
#-webkit-keyframes expandAni-3 {
0% {left:0;}
100% {left:10px;}
}
#main-nav {
position:fixed;
left:0;
top:0;
display:block;
width:100%;
height:100%;
z-index:-1;
}
.slice {
width:25%;
height:30%;
min-height:30%;
float:left;
background:black;
opacity:0;
-webkit-transition: 1s;
}
.background {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
}

Answer 1

Managed to do it; deleted the layout and started again.
The main thing was to set overflow hidden on the master div and give it a min-height.
Followed the answers here: Expanding a parent <div> to the height of its children
#master {
background: #000;
height: auto;
min-height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
#main-nav {
left: 0;
position: absolute;
top: 0;
display: block;
height: 100%;
position: fixed;
width: 100%;
z-index: -1;
}
.slice {
background: #000;
float: left;
height: 33.66%;
opacity: 0;
filter: alpha(opacity=0);
width: 25%;
-webkit-transition: 1s;
}