How to center these navigation buttons? - css

Question

I'm creating a navigation bar, in which there are five different links. Using div elements, I created the nav bar and then separated each link into its own container. By default, they all crush over to the left side, not centered in the nav bar. To get along without a totally misaligned nav bar, I added approximate widths to equally space out each link from one another; however, it's not perfectly aligned and I need a more professional way about centering them.
You can visually see what I'm talking about here: http://jsfiddle.net/W2Pez/2
You can see that they're not all equally spaced out from one another. I plan on removing the width attributes from each link, so how do I make it so that each link is the same number of pixels away from one another WITHOUT using widths? Please note each link's container cannot be the same width, since, for example, the amount of empty space left over from "Home" would be a lot more than "Rates & Packages".
CSS:
#nav {
background-color: #C08374;
height: 50px;
line-height: 50px;
width: 1000px;
margin: auto;
vertical-align: middle;
border: 1px solid #A76358;
}
.nav_button {
float: left;
text-align: center;
line-height: 50px;
}
HTML:
<div id="nav">
<div class="nav_button" style="width: 25px"></div>
<div class="nav_button" style="width: 175px">
Home
</div>
<div class="nav_button" style="width: 250px">
Rates & Packages
</div>
<div class="nav_button" style="width: 175px">
About Us
</div>
<div class="nav_button" style="width: 150px">
Menu
</div>
<div class="nav_button" style="width: 250px">
Nearby Attractions
</div>
<div class="nav_button" style="width: 25px">
</div>

Answer 1

The trick is to set the container to have text-align: center and then have the list (it should be a <ul> set to display: inline-block. That will center the whole list and you can then float the list elements and control how far apart they are from each other using margins.
Here's a stripped down version of your code:
HTML
<div id="nav">
<ul>
<li class="nav_button">
Home
</li>
<li class="nav_button">
Rates & Packages
</li>
<li class="nav_button">
About Us
</li>
<li class="nav_button">
Menu
</li>
<li class="nav_button">
Nearby Attractions
</li>
</ul>
</div>
CSS
#nav {
background-color: #C08374;
border: 1px solid #A76358;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
margin: 0 20px;
}
ul li a {
color: white;
}
Here's a fiddle.