1

I have encountered some CSS which I don't understand - please refer to this Pen: https://codepen.io/GregS2/pen/pGWrav If I remove the overflow: auto from the navbar, the div collapses, and only it's border is visible. (although, if I make the border very thick, the contents do then become visible again). Why exactly is the overflow: auto required?

HTML:

<body>
  <header>
    <nav id="navbar">
      <h1 class="logo"> <a href="index.html">HBT</a> </h1>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
  </header>
</body>

CSS:

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main styling */
html, body {
  line-height: 1.7em;
}


#navbar {
  background: #333;
  color: white;
  border: red solid 5px;

/* Removing the following line causes the navbar to collapse - why? */
  overflow: auto;

}

#navbar a {
  color: white;
}

#navbar h1 {
  float: left;
}

#navbar ul {
  list-style: none;
  float: right;
}

a {
  color: #333;
  text-decoration: none;
}
GregS
  • 147
  • 6
  • Thanks Temani - much appreciated. Just by the way, this code was encountered in a beginners online course, and in fairness to the author, they did say that floats are not normally used for layout nowadays, and the course does cover the modern methods further in. – GregS Feb 06 '19 at 10:20

0 Answers0