CSS horizontal streching of width within a container

I have a container called Navbar which has multiple items called buttons. The number of buttons will varie, depending on the number of times its called. I want the buttons to stretch horizontally to fill up the entire NarBar space (horizontal as well). However, with my current CSS, it will only stay on the left, and the width doesnt change. Please help!

I have this CSS code:

#NavBar {
position:relative;
width: 760px;
height:: 32px;
float:left;
margin: 0 0 1px 0;
line-height: 15px;
background-color: #999999;
text-align:center;
vertical-align:middle;
}
#NavBar .button {
position:relative;
float: left;
width: auto;
/* min-width:107px !important;
min-width:100px; */
padding: 0 0 2px 0 !important; /* firefox */
padding: 1px 12px 1px 12px;
border-left:thin solid #FFFFFF;
text-align:center;
vertical-align:middle;
height: 30px;
line-height:15px;
background-color: #999999;
margin: 0 auto;
}

#NavBar a {
FONT-SIZE: 14px;
COLOR: #FFFFFF;  
link="#FFFFFF"
vlink="#FFFFFF"
alink="#FFFFFF";
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
font-weight: bold;
line-height: 15px;
position: relative;
color: #FFFFFF;
vertical-align: middle;
text-align:center;
min-width: 107px;
}

the html file with this part would look like:

  <div id="NavBar">
    <!-- Top Menu links go here -->
    <div class="button"><a href="test1.html">Engineering</a></div>
    <div class="button"><a href="test1.html">Finance & IT</a></div>
    <div class="button"><a href="test1.html">Human<br> Resources</a></div>
    <div class="button"><a href="test1.html">Manufacturing<br> Operations</a></div>
  </div>