BetterPHP

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

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;
									}

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

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.

nav ul li {
    float: left;
    overflow: auto;
}

It's a bit of a weird trick since auto is the default, but it works