Question 262696 in Html Question posted in
Some basic documentation can be found here.

CSS Question – Why is "overflow:hidden" Needed in This HTML page?

I am learning CSS through the lessons on the w3schools.com website.
The example below works properly. There is a div element with a class of "navbar"
The overflow property has a value of "hidden". But if I remove the property, the navbar
element seems to disappear, although the elements inside it are seen if you hover over
them.

My question is: Why is "overflow:hidden" needed for div.navbar? It seems that all its
content fits inside the div and I don’t see any overflow.

Thank you.

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

        #div2 img {
        width: 100%;
        display: block;
        }

</style>
</head>
<body style="background-color:white;">

<div id="n1" class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

<div id="div2">
    <img src="BNB-Stonehenge.jpg" alt="Descriptive Image Alt Text">
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>
Tags:

3

Answers


  1. 0

    overflow: hidden is needed because the menu is formatted using floats. When you remove overflow: hidden, the menu collapses to zero height because the floats don’t count as flow content. I don’t understand all the technicalities, but basically overflow: hidden causes a new block formatting context to be created. Refer to this and this.

    This is not a great way to build a navigation menu. A flexbox is cleaner and more robust. A quick change to display: flex on the navbar means you can remove the floats and the overflow: hidden.

    Fortunately, the parts of this example which relate to the drop-down sections of the menu are still valid and clever, so this is a worthwhile tutorial. But they really do need to update it to remove those floats.

    body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  background-color: #333;
  display: flex;
}

.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#div2 img {
  width: 100%;
  display: block;
}
    <div id="n1" class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

<div id="div2">
    <img src="https://picsum.photos/800/400">
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    Login or Signup to reply.
  2. 0

    everywhere you use float, you should clear that after it.
    here you can add this css:

    .navbar::after{
  content:"";
  display:block;
  clear:both;
}
    Login or Signup to reply.
  3. 0

    overflow: hidden; is a CSS property and value combination that is used for a specific purpose in web design and layout. It is primarily used to control how overflowing content within an element is displayed. Here are some common use cases for overflow: hidden;

    1. Clearing Floats: One of the most common use cases for overflow: hidden; is to clear floats. When you float elements within a container, the container may not automatically adjust its height to encompass the floated elements. This can lead to layout issues where other elements might overlap or not appear correctly. By setting overflow: hidden; on the container, it forces the container to adjust its height to contain the floated elements.
    .container {
    overflow: hidden;
}
    1. Hidden Overflow: As the name implies, overflow: hidden; also hides any content that overflows the dimensions of an element. If you have an element with a fixed size, and its content extends beyond those dimensions, you can use overflow: hidden; to clip the content and prevent it from spilling out and affecting the layout of surrounding elements.
    .box {
    width: 200px;
    height: 200px;
    overflow: hidden;
}
    1. Creating Scrollable Areas: By combining overflow: hidden; with height or width and overflow: auto; or overflow: scroll;, you can create scrollable areas within an element. This is useful when you want to display a limited portion of content within a fixed-size container while allowing users to scroll through the hidden content.
    .scrollable-container {
    width: 300px;
    height: 200px;
    overflow: auto;
}

    Hope it’s helpful to you. For more you can visit this link https://www.w3schools.com/css/css_overflow.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search