Can you explain why the background color of the ul element disappears when its child elements are floated?
I have a vague memory of reading something about floats causing this issue, but I can't recall the details.
(JSFiddle)
ul {
padding-left: 0;
background-color: #036;
}
ul li {
float: left;
}<div id="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>