Herrsocke Herrsocke - 8 months ago 52
CSS Question

Why doesnt it work without overflow hidden?

i was just looking into html / css on w3schools when i found this code example below.
I was wondering why it only displays the list when the ul has the "overflow: hidden; "
Since the definition of overflow hidden is: The overflow is clipped, and the rest of the content will be invisible

Thanks for every answer :)

<!DOCTYPE html>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;

li {
float: left;

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

li a:hover {
background-color: #111111;

<li><a 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>



By example:

The image in the following divs is floated. The first div has the property of overflow:hidden;. In the result it can be seen that the first div will facilitate the content by adapting in size, but the second div remains collapsed. The float property has a way of taking the element out of the document flow, but the overflow:hidden; restores that. It seems a bit counter intuitive.

#div1, #div2 {
  border: 2px solid green;

img {

#div1 {
<div id="div1">
<img src="http://placehold.it/200x100"></div>
<div id="div2">
<img src="http://placehold.it/200x100"></div>