Probably really easy : floated menu auto-width

[jackpf]

Hi all,

I'm thinking about putting a new menu on my site, but along the top, rather than down the side.

 

However, the only way I can get the menu items to have an auto width is either by using a table, or display: table (which isn't widely supported).

 

For example, at the moment, all of my divs just pile over to the left. I've tried stuff such as width: auto, text-align: center, and margin: 0 auto, but they still won't space out.

 

This is my current code.

 

<style type="text/css">
.nav
{
	width: 100%; /*just to make sure it's 100%*/
	text-align: center; /*futile attempt at auto width*/
	margin: 0 auto; /*futile attempt at auto width*/
	overflow: auto; /*futile attempt at auto width*/
	border: 1px solid green;
}
.nav div
{
	width: auto; /*futile attempt at auto width*/
	text-align: center; /*futile attempt at auto width*/
	margin: 0 auto; /*futile attempt at auto width*/
	float: left; /*to display vertically*/
	border: 1px solid red; /*just so I can see how wide they are, for testing purposed*/
}
</style>

<div class="nav">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
</div>

 

Any help would be awesome.

 

Thanks, Jack.

[mimintweak]

Hi, not an expert but you could try something like this

#menu ul{

width: (fill in the blank)

margin: 0;

padding:8px 0px 8px 0px;

list-style: none;

 

}

 

#menu ul li

{

display: inline;

margin: 0;

}

 

 

[jackpf]

Yeah, I know how to set it to be a certain width, but I can't set it to be an auto width.

 

For example, divs usually take up 100% of the space they can. But when I float them I can't seem to set them to be a percentage width.

 

Like, if you take my code and try and set the divs to like, 20% or something, it'll have no effect. I just don't understand why...