I need help making a horizontal nav list expand left and right

[tljryan]

I have exhausted trial & error, google, and the sitepoint search function. I feel that I am missing a page that explains the technique. Or is it even possible to make a unordered list horizontal navigation span an entire width, no matter the content? I don't know if code will be helpful but here it goes:

CSS

.navtop2	{
	position:relative ;
	display:block;
	width:870px ;
	height:24px ;
	font-size:11px ;
	font-weight:bold ;
	background:transparent url('nav_bg1.gif') repeat-x top left ;
	font-family:Verdana,Arial,Helvitica,sans-serif ;
	overflow:hidden ;
	}
.navtop2 ul	{
	margin:0 ;
	padding:0 ;
	list-style-type:none ;
	width:auto ;
	}
.navtop2 ul li	{
	display:block ;
	float:left ; 
	margin:0 1px 0 0 ;
	}
.navtop2 ul li a	{
	display:block ;
	float:left ;
	color:#000000 ;
	text-decoration:none ;
	padding:6px 20px 0 20px ;
	height:24px ;
	}
.navtop2 ul li a:hover,
.navtop2 ul li a.current	{
	color:#ffffff ;
	background:transparent url('images/nav_bg1_hover.gif.gif') repeat-x top left ;
	}
.navtop2 img	{
	float:left ;
	}

<div class="navtop2">
	<a href="#"><img src="images/top_www.gif" /></a>
	<ul style="float:left">
		<li><a href="" title="">Link 1</a></li>
		<li><a href="" title="">Link 2</a></li>
		<li><a href="" title="">Link 3</a></li>
		<li><a href="" title="">Link 4</a></li>
		<li><a href="" title="">Link 5</a></li>
	</ul>
</div>

If any of you could point me in the right direction that would be very helpful. Thank you in advance.

[Erik J]

Do you say the css must handle the html number of items changing without css change, I think it isn't possible.

If the css can change according to number of items in the html, it is possible to fluidly strech the list to parent width.

[tljryan]

Do you say the css must handle the html changing without css change, I think it isn't possible.

If the css can change according to the html, it is possible to fluidly strech the list to parent width.

I am willing to try anything that'll work. How do you make the CSS change according to the html? Or I think I misunderstand what you're saying.

[Erik J]

I mean, if the css for the list is manually (or automaticly by server-side script in a CMS) changed when the number of list-item is?

You said; no matter the content.

[tljryan]

I mean, if the css for the list is manually (or automaticly by server-side script in a CMS) changed when the number of list-item is?

You said; no matter the content.

Yeah, like if list items were added, the navigation would adjust to fit them in -- evenly spaced list links to fit nicely within the parent width.

So it doesn't sound like there's a pretty way to do this. I know how to do this with html, but that's not really the same thing and is pretty ugly.

If there's a concrete solution to this....

[Erik J]

Still not sure about the specification, if you have access to adjust the css when the number of items change.

Like if you are building the site - there can be a solution. Look at this examples: equal item widths, different item widths.

[tljryan]

Still not sure about the specification, if you have access to adjust the css when the number of items change.

Like if you are building the site - there can be a solution. Look at this examples: equal item widths, different item widths.

Yes I'm building the site. I'm taking a look at those.

*Edit: That entire thread... this is what I was looking for. This should work, I'll read through the thing. Thanks a lot, I don't know how it slipped by me. I'll let you know if it doesn't work out

**Edit: Thanks again. This really worked [to annoying lengths].