I've experimented with various methods to create a fluid menu, but none have been successful. Currently, I have an interactive menu that sometimes displays 6 items and other times 7 items.
When I have 7 items, the menu aligns perfectly across the width, but when I have only 6 items, there is excess space on the right side of the menu.
I am looking for a solution that doesn't require me to constantly change the code every time I activate or deactivate an item and I believe CSS might hold the key to solving this issue.
Is it possible to fill up the empty space with the items without resorting to 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;
}
Assigning a specific width to the items results in some text spanning over two rows, which is not desirable.
I hope my issue is clear. Thank you for any help you can provide.
Update: View the jsFiddle here: http://jsfiddle.net/UDv2A/1/