asked on

"overflow: auto;" and "display: block;"

I am trying to styling navbar.

<body>
  <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>

Open in new window

my css is like this:

 /* Navbar Styling */
    .navbar {
      list-style: none;
      margin: 0;
      padding: 0;
      background: #4c6ca0;
      overflow: auto;
    }

    .navbar li {
      float: left;
    }

Open in new window

At this point I have this:

background property is not applied.
when I add "overflow: auto;" it shows the background.

..navbar {
list-style: none;
margin: 0;
padding: 0;
background: #4c6ca0;
overflow: auto;
}

Q1 - First why the background disappeared when "float: left" was added?
Q2 - What does "overflow: auto" here? How come this bring the background back?

Then I added the following:

.navbar li a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 15px 20px;
    }

Open in new window

Q3 - It looks like "display:block;" added padding. When I actually tried to add "padding'. It didn't work.
How come "display:block" added the space around <a>?

ASKER CERTIFIED SOLUTION