Home/ Questions/Q 6061419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:56:08+00:00

I’m working on a CSS layout, but I don’t understand why the background color

  • 0

I’m working on a CSS layout, but I don’t understand why the background color of my navigation bar doesn’t show up unless I add overflow: hidden to the CSS. Can someone explain to me what’s going on? Thanks 🙂

My CSS file:

@import "reset.css"; /* Meyer's CSS reset */

body { background-color: #f3f3f3;   font: 15px sans-serif; }

#wrapper { 
  width: 1000px;
  margin: 0 auto;
}

#navigation {
  width: inherit;
  margin-top: 20px;
  background-color: #ccc;
  overflow: hidden;
}

#navigation li {
  float: left;
}

#navigation li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  color: #000;
}

#navigation li a:hover {
  background-color: #aaa;
}

My HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Layout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="">Nav0</a></li>
        <li><a href="">Nav1</a></li>
        <li><a href="">Nav2</a></li>
        <li><a href="">Nav3</a></li>
        <li><a href="">Nav4</a></li>
        <li><a href="">Nav5</a></li>
      </ul>
    </div>
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.

    • 0