Help with nav backround overflow

HTML & CSS
1

Hi,

I’m having trouble getting my nav bar to look right. I get it to work fine, until I had a float right property to the nav’s li’s. Then there is a few pixels that poke through the bottom of the nav bar.

Here it is without float on:

Here it is with float:

Here is my CSS styling for the nav:

nav {
background-color: #bebebe;
border-top: 3px solid gold;
border-bottom: 3px solid gold;
display: inline-block;
width: 100%;
}

nav ul {
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}

nav ul li {
display: inline-block;
}

nav ul li a {
text-decoration: none;
color: #555555;
display: inline-block;
padding: 15px 20px;
font-weight: bold;
}

nav a:hover, nav a.current {
color: gold;
background-color: white;
}

2

NEVERMIND: a little bit of negative margin did the tric

3

Hi,

You should contain the floated elements which is easily done by adding overflow:hidden to the parent assuming you don’t need visible overflow.


nav ul {
margin: 0;
padding: 0;
text-align: center;
list-style: none;
overflow: hidden;
}

No need for negative margin hacks.

Floated elements are removed from the flow and a parent will not contain them unless you use a containment mechanism.