Float left doesn't work yet display inline block does

[wrichards8]

Hi,

I am using the following CSS to produce a horizontal menu for the new system I'm working on. The code look like this [syntax=css]nav {
border: #000000 thin solid;
color: #FFFFFF;
width: 100%;
background: #000056;
}
nav ul {
margin: 0; padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding-right: 30%;
}
nav ul li a:hover {
color: #FFFF00;
}[/syntax]My problem is, however, that when I use float:left for the nav ul li element, it shows the border as a single line with the links underneath but when I use display: inline-block it shows the links on the blue background. What I am trying to achieve is to have the links at the top of the page, on a dark blue background, with each link having space between it. Not sure what I'm doing wrong

[jacek]

If you have a float:left element it will not expand to the size of the contents by default, you can make it expand by adding overflow:auto as well.

[syntax=css]nav ul li {
float: left;
overflow: auto;
}[/syntax]
It's a bit of a weird trick since auto is the default, but it works