• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 80
  • Last Modified:

HTML Lists

If I take out the "overflow:hidden", the page totally can't display. Any idea ?

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<ul>
  <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>
</ul>

</body>
</html>

Open in new window

0
AXISHK
Asked:
AXISHK
2 Solutions
 
Amita SinghWeb DeveloperCommented:
replace ul css with this css
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333333;
    width: 100%;
    float: left;
}

Open in new window

0
 
Julian HansenCommented:
That is because of the float left on the <li> items. The <ul> has no way of knowing what its height is. The overflow: hidden forces the <ul> to take on the height of the child elements.

First question - why is this a problem?

To get around it define your li as display: inline-block instead of float: left
li {
  display: inline-block;
}

Open in new window

1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now