changing Div height parameters does nothing to the size - html

Question

I cannot figure out why the height of this container(summaryBox) is not changing. I have tried setting the min-height, max-height and changing some other things but nothing is working. I wanted the height of the container to be 20% of the screen, but its not working. Everything else works fine and I am scratching my head.
CSS:
.summaryBox {
border: 1px solid green ;
width: 80%;
margin: auto;
overflow: hidden;
min-height: 20%;
}
.summaryBox .img1 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .img2 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .sum1 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .sum2 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .arrowPanelLeft {
float: left;
width: 6%;
color: white;
text-align: center;
}
.summaryBox .arrowPanelRight {
float: right;
width: 6%;
color: white;
text-align: center;
}
HTML:
<div class="summaryBox">
<div class="arrowPanelLeft">
<p><</p>
</div>
<div class="img1">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="sum1">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="img2">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="sum2">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="arrowPanelRight">
<p>></p>
</div>
</div>

Answer 1

You need to set the height of the html and body elements, as well. This is something 'CSS resets' (such as Eric Meyer's) will usually do for you. Append this code to your css file:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

Answer 2

You have set .summeryBox height to a percentage.. of what?
You need to add this to your css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Then the .summeryBox will be set relative to the body tag.
Alternatively you can set the outer container (.summeryBox) dimensions in pixels.