Making menu fluid with CSS

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"><a href="/home/" title="Home">Home</a></li>
        <li class="menu_2"><a href="/test/" title="test">test</a></li>
        <li class="menu_3"><a href="/test-2/" title="test 2">test 2</a></li>
        <li class="menu_4"><a href="/bigger-menu-item/" title="bigger-menu-item">bigger-menu-item</a></li>
        <li class="menu_5"><a href="/another-big-menu-item/" title="another-big-menu-item">another-big-menu-item</a></li>
        <li class="menu_6"><a href="/contact/" title="Contact">Contact</a></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);
}