3

I started learning html and I'm getting some practice on w3schools.com. I was curious about the overflow: hidden line of code. Why does the whole navigation bar go away when I delete it? I thought overflow was just for hiding scroll bars?

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>
mhatch
  • 4,441
  • 6
  • 36
  • 62
Joey
  • 45
  • 6

5 Answers5

4

Floated elements do not add height to their containing element. Adding the overflow property gives the containing ul height (which is where your background color is coming from). Inspect in your web browser and notice that the ul height goes to 0 when overflow is removed.

It is because of the background color/ text color that you do not see anything. The nav li elements are still there, but you do not see the white on white text. You do not see the grey background because the ul height goes to 0.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    background-color: #333;
}

li {
    float: left;
    background-color: red;
}

li a {
    display: block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.spacer {
  clear: both;
  padding-top: 20px;
  padding-bottom: 5px;
}

.withoverflow {
   overflow: hidden;
}
<!DOCTYPE html>
<html>
<body>
      
<div class="spacer">without overflow</div>
  
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="spacer">with overflow</div>

<ul class="withoverflow">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
mhatch
  • 4,441
  • 6
  • 36
  • 62
1

Yes overflow:hidden does additional task other than scroll-bars. Your ul is not going away, the problem here is you added float to li so ul will not allocat space for floating child(li) if you add overflow:hidden to parent(ul) it will not allow child to overflow beyond his limit so it will appears, you can try adding border:1px solid red to ul and check so that you can understand this logic.

Also Overflow hidden will hide scroll-bar when it has width and height values.

Manivannan
  • 3,074
  • 3
  • 21
  • 32
0

There is a float issue in your code. Since the childs of your ul are floating, the parent doesnt expand to include all of them. Normally we use to use the clearfix method, that allow the parent get the right height, even its children is floating.

The overflow: hidden; ou overflow: auto; has the same capacity to solved this issue as the clearfix method has.

You can understand it better here:

What methods of ‘clearfix’ can I use?

CLEARFIX METHOD

Create a class clearfix with these parameters:

.clearfix:after, .clearfix:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Now, just add this class in your parent element that you want to fix. (In you case the ul)

Here is a fiddle with your code and working with clearfix method:

https://fiddle.jshell.net/vs3Lqt22/

Community
  • 1
  • 1
Claudio Bonfati
  • 493
  • 3
  • 14
0

In simple language, it is due to the float property So to solve this issue of this without using the overflow simply use the clearfix property to clear the flow.

Add class="clearfix" to the ul And to the style add

.clearfix::after{
content:"";
clear:both;
display:table;
}
Suraj Ktha
  • 1
0

This code solve the problem.

<!DOCTYPE html>
   <html>
   <head>
   <style>
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
}
li{
  float: left;
  background-color: #333;
  width:100%;
}

a{
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
a:hover {
  background-color: #111;
}
.s{
  background-color: red;
}

</style>
</head>
<body>
<ul>
  <li><a href="#home" class="s">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
</html>
Farnaz-M
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 03 '21 at 05:37
  • In other words provide an explanation for your code. Thanks. – Dropout Oct 03 '21 at 06:40