Why sometimes a parent element gets 0px height?

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.

score 3 · Accepted Answer · edited May 23 '17 at 12:13

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/

this could be better, by adding clearfix to the parent element, where it should be, and adding the clearfix method to it. its better HTML/CSS. this solution is like "hacking" an extra element to "fix" things. — Mark, Oct 30 '12 at 13:11

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

You can use a "clearfix" on glossarySelector.

.glossarySelector
{
     background: #000;
     overflow: hidden;
}

See What methods of ‘clearfix’ can I use? for alternative clearfix methods.

edited May 23 '17 at 12:24

Community

1
1

answered Oct 30 '12 at 12:59

Matteus Hemström

3,796
2
26
34

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

"overflow:hidden" is a trick that fix this problem. Hope this helps.

.glossarySelector
    {
    background-color: #ff0000;
    overflow:hidden;
    }

example here.

This answer explain everything about clear fix.

edited May 23 '17 at 12:30

Community

1
1

answered Oct 30 '12 at 13:03

ymutlu

6,585
4
35
47

score 0 · Answer 4 · answered Oct 30 '12 at 13:05

0

thats because there is a float: left on the list items <li>

you could do this:

.glossarySelector {
  background: #EFEFEF;
  overflow: hidden;
}

or add a clearfix

answered Oct 30 '12 at 13:05

Mark

6,762
1
33
50

score -2 · Answer 5 · answered Oct 30 '12 at 13:02

-2

The default display mode of a div is "block", wich does not wrap around it's content in all cases. You should add display: inline-block;

In your code, the list will still overlap on the right side, because of the left: 30px of the ul element, but if you replace it by margin-left:30px; or padding-left:30px; it will work fine ;)

answered Oct 30 '12 at 13:02

Van Coding

24,244
24
88
132

Why was this downvoted? It's not correct? @Van Coding I can't use display:inline-block. It doesn't work with IE7. – caiocpricci2 Oct 30 '12 at 13:07
No idea, why it was downvoted.. I love the guys that downvote, but don't give a reason for it.. :( – Van Coding Oct 30 '12 at 13:08

Why sometimes a parent element gets 0px height?

5 Answers5