Making menu fluid with CSS - html

Question

I've tried different tactics on making my menu fluid but none seem to work. I current have an interactive menu. Sometimes I want 6 items to show and sometimes I want 7 items to show.
When I have 7 items the menu is properly aligned over the entire width but when I have 6 items there's a lot of space on the right side of the menu.
I don't want to change the entire code every time I have deactivated an item and hope to be able to resolve this problem with just CSS.
Is it possible to fill this space up with the items?
I know I can do this with tables but I don't want to use tables.
HTML:
<nav id="menu_container">
<ul id = "menu">
<li class="menu_1 active">Home</li>
<li class="menu_2">test</li>
<li class="menu_3">test 2</li>
<li class="menu_4">bigger-menu-item</li>
<li class="menu_5">another-big-menu-item</li>
<li class="menu_6">Contact</li>
</ul>
</nav>
CSS:
#menu_container {
background: transparent url('/img/menu-bg.png') no-repeat;
float:left;
position:relative;
z-index: 999999;
width: 690px;
height:42px;
margin:29px 0 29px 19px;
}
#menu_container > ul {
padding: 0;
margin: 0;
margin-left:29px;
}
#menu_container > ul > li {
color: #ffffff;
float: left;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
When I add a width to the items some show the text on two rows and I don't want that.
I hope I made it clear what I want to do. Thank you.
Update: jsFiddle: http://jsfiddle.net/UDv2A/1/

Answer 1

If you just want to center the contents you could remove the float and display the lis as inline-block:
#menu_container > ul {
padding: 0;
text-align: center;
}
#menu_container > ul > li {
color: #ffffff;
display: inline-block;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
See jsFiddle.
If you want to expand the widths of the lis aswell, use display: table;:
#menu_container > ul {
padding: 0;
margin: 0 auto;
display: table;
width: 100%
}
#menu_container > ul > li {
color: #ffffff;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
display: table-cell;
width: auto;
}
See jsFiddle.
And if you want this to be fluid when you resize down... make sure to give #menu_container a width of 100%.

Answer 2

I'd have another solution:
jsfiddle
/* five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
/* six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
width: 16.66%;
width: calc(100% / 6);
}

Answer 3

Or you can try using 100% insted of fixed width.

Answer 4

#pscheuller just gave the right way to fill the container.
But I think this kind of styles has one problem, just in my point of view, that is the paddings of items are not the same. Items with longer text will have larger paddings. So I prefer to have space in both left and right, put <ul> in the center of container and give each item the same padding.