ciao a tutti ho un probelma... sto relaizzando un lavoro e mi trovo in questa situazione


ho un div di 680px

al suo interno ho delle voci di menu che però sono dinamiche quindi possono essere 4 o 5

io vorrei che indipendentemente da tutto si distribuissero in maniera equidistante sino ad occupare il 100% del mio div


il mio codice

codice:
Questo è il div con l'img di sfondo

#portal-globalnav {
	clear: both;
	list-style: none;
	list-style-image: none;
	list-style-position: outside;
	margin: 0px;
	padding: 0px;
	background-image: url(&dtml-portal_url;/nav-bar.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 40px;
	position: relative;
}

questi sono i miei li delle voci

#portal-globalnav li {
	float: left;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-top:15px;
	text-align:center;
	width:25%;  ovviamente funziona solo se le voci sono 4 così io dovrei disporrli indipendentemente dalle voci come fare? 
             text-transform:uppercase;
	background-image: url(&dtml-portal_url;/separator.gif);
	background-repeat: no-repeat;
	background-position:right center;
	height:25px;
}


rollOver

#portal-globalnav li a{
	display:block;
	text-decoration: none;
	font-family: verdana, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
}

#portal-globalnav li a:hover{
	color:#c4d18a
}