1

In the following code, why does the ul element loose its background color when the child elements are floated?

I remember reading something about floats causing this, but I cannot remember.

(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>
Robert
  • 10,126
  • 19
  • 78
  • 130
  • https://css-tricks.com/all-about-floats/ Basically, parent element collapse... quick fix: set height to ul... – sinisake Aug 12 '15 at 00:27
  • The answer you selected as correct is actually a very bad hack way of fixing this issue. You should use the information in the linked duplicate. –  Aug 12 '15 at 02:12
  • Thanks for the tip. I am a noob to CSS so i didnt know better. – Robert Aug 12 '15 at 02:32

1 Answers1

-1

The background color is there. But you can't see it because it is behind the li tags. To see that its there you can add a height tag to the ul attribute and then you will see the background. 

ul {
  padding-left: 0;
  background-color: #036;
  height: 40px;
}
ul li {
  float: left;
}

To solve this properly you can add a clearfix class to the UL tag and add the following CSS

.clearfix {
    content: "";
    display: inline-block;
    clear: both;
}
Sohrab Hejazi
  • 1,441
  • 6
  • 18
  • 29
  • 2
    This is so wrong, view the linked duplicate to see how it should be done. –  Aug 12 '15 at 02:08