Question

I’ve started with HTML and CSS a couple weeks ago and this happened several times, and I don’t know why.

Sometimes I apply a background to the parent element, include something on it, but the height of the parent stays 0 instead receiving height of the children. And sometimes it does (which I believe should be the correct behavior no?)

My glossarySelector gets 0 height. Therefore my background color is not displayed.

.glossarySelector {
  background: #EFEFEF; 
}

<div class="glossarySelector">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
  </ul>
</div>

Why?

You can see the full code here.

Answer 1

EDIT: This SO answer provides several ways of solving this issue, each with their advantages and disadvantages: https://stackoverflow.com/a/1633170/388916

---

An element is completely flat (0px height) when it has no children or if the children are removed from the page flow using position: absolute or floating. Since the list elements all have float: left there are no more elements inside glossarySelector to expand it’s height.

I see you’ve created a class called “clearFix”. Just add a div with that class inside the glossarySelector div to fix the floating issue:

<div class="glossarySelector">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
    <div class="clearFix"></div>
</div>

Fiddle: http://jsfiddle.net/gTKNk/12/