Why do I have to add "overflow:hidden" to make the navigation bar visible on the page?

Question

I'm a newbie to css and have been struggling with the following problem of my code for the whole morning. I would really appreciate it if someone can help me find out the reason.

Why does the navigation bar totally disappear from the page if I don't set the "overflow" of "ul.navBar" to "hidden"?

<html>
<head>
<style>
    ul.navBar {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: #4277f4;
        cursor: pointer;
    }

    li {
        float: left;
    }

    li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 20px;
        text-decoration: none;
    }

    li:hover {
        background-color: #A2AEB3;
    }

    .dropDownContent {
        display: none;
        position: absolute;
        background-color: #7DC9E3;
        width: 150px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        text-decoration: none;

    }
    .dropDownContent a {
        color: white;
        display: block;

    }
    .dropDownContent a:hover{
        background-color: #4A96B0;
    }


    li.dropDownBtn:hover .dropDownContent{
        display: block;
    }

</style>
</head>

<body>
    <ul class="navBar">
    <li><a href="#">Home</a></li>
    <li class="dropDownBtn"><a href="#">Products</a>
        <div class="dropDownContent">
            <a href="#">Product1</a>
            <a href="#">Product2</a>
            <a href="#">Product3</a>
        </div>
    </li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
</body>
</html>

Here's the code page for this navigation bar.

score 10 · Accepted Answer · edited May 23 '17 at 11:46

Why does the navigation bar totally disappear from the page if I don't set the overflow of ul.navBar to hidden?

This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .

Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.

Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make them larger than you think. Especially when using percentage widths.

Example:

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 33.3333%;
}

.inline li {
  display: inline-block;
  background-color: gold;
}

.float li {
  float: left;
  background-color: indianred;
}

.flex {
  clear: left;
  display: flex;
  background-color: skyblue;
}

<ul class="inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="float">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="flex">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Here's some options on how to handle the white space if you chose the inline-block route.

score 5 · Answer 2 · answered Mar 24 '17 at 19:42

Floated elements (your li in this case) have a height of 0. So, essentially, your ul element is 0 pixels tall.

Adding display: inline-block to your li elements allow for this to be corrected. Therefore, the overflow style for your ul is not required.

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding:0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-decoration: none;
}

li:hover {
    background-color: #A2AEB3;
}

.dropDownContent {
    display: none;
    position: absolute;
    background-color: #7DC9E3;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;
    
}
.dropDownContent a {
    color: white;
    display: block;

}
.dropDownContent a:hover{
    background-color: #4A96B0;
}


li.dropDownBtn:hover .dropDownContent{
    display: block;
}

<body>
    <ul class="navBar">
        <li><a href="#">Home</a></li>
        <li class="dropDownBtn"><a href="#">Products</a>
            <div class="dropDownContent">
                <a href="#">Product1</a>
                <a href="#">Product2</a>
                <a href="#">Product3</a>
            </div>
        </li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
</body>
</html>

What if the white space around inline elements becomes an issue? How does one handle that? — hungerstar, Mar 24 '17 at 19:50
IMHO that's a sloppy solution. Things become more complicated than they need to be at that point. It's a lot simpler to use `overflow: hidden;` or a [clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). — hungerstar, Mar 24 '17 at 19:54
I'm not aware of a situation where one would chose to tackle the white space from inline elements with margin and padding when said white space is an issue. Please provide an example where margin/padding would preferred to using floats or flexbox. I'm honestly curious. — hungerstar, Mar 24 '17 at 20:04

score 3 · Answer 3 · answered Mar 24 '17 at 19:42

The issue is that you are floating your li elements which causes the ul to not have a height. Try using display:inline-block; instead.

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-decoration: none;
}

li:hover {
    background-color: #A2AEB3;
}

.dropDownContent {
    display: none;
    position: absolute;
    background-color: #7DC9E3;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;

}
.dropDownContent a {
    color: white;
    display: block;

}
.dropDownContent a:hover{
    background-color: #4A96B0;
}


li.dropDownBtn:hover .dropDownContent{
    display: block;
}

<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
    <div class="dropDownContent">
        <a href="#">Product1</a>
        <a href="#">Product2</a>
        <a href="#">Product3</a>
    </div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>

What if the white space around inline elements becomes an issue? How does one handle that? — hungerstar, Mar 24 '17 at 19:50
[Here's a good article on that](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) — APAD1, Mar 24 '17 at 19:52

Why do I have to add "overflow:hidden" to make the navigation bar visible on the page?

3 Answers3

Linked