Padding messing with background color - html

Question

I got a problem with my footer background. It seems like the height of the #pagefooter is 0 and the background color is only applied to the padding, vertical which 2x 25px.
I tried several things, but i didn't find a solution.
What's wrong here?
///THE HTML
<div id="pagefooter">
<footer>
<nav id="f1" class="footernav">
<h1>Misc</h1>
</br>
<ul>
<li>
Lorem
</li>
<li>
ipsum
<li>
<li>
dolor
</li>
<li>
sit
</li>
<li>
amet
</li>
</ul>
</nav>
<nav id="f2" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f3" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f4" class="footernav">
<!-- SOME MENU -->
</nav>
</footer>
</div>
///THE CSS
#pagefooter {
background-color: #1a1a1a;
padding:25px 100px;
}
.footernav {
float:left;
width:25%;
margin-bottom: 35px;
}
Here's an example: http://jsfiddle.net/AR3AC/

Answer 1

Basically, #pagefooter contains only floated elements which make the parent element have no height (and therefore no background colour). To work around this, set the overflow property to auto:
#pagefooter {
background-color: #1a1a1a;
padding: 25px 100px;
overflow: auto;
}

Answer 2

The height of the pagefooter is never set as far as I can tell. Add a line into #pagefooter so like this to explicitly state the height you want:
#pagefooter {
background-color: #aaa;
height: 100px;
padding:25px 100px;
}
I'm not sure if that answers your question, but that's a good place to start.

Answer 3

Now and then I'll get an issue with overflow:auto. In case you do, another way to deal with this is to put an empty clearing div right before . It can just be <div style="clear:both"></div>. (I generally make a class ".clear" which has clear:both. Makes it easy to troubleshoot this sort of thing by just testing with a <div class="clear"></div> to see if floats are the issue.