title: How to center these navigation buttons?
body: <p>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.</p>
  
  <p>You can visually see what I'm talking about here: <a href="http://jsfiddle.net/W2Pez/2" rel="nofollow">http://jsfiddle.net/W2Pez/2</a></p>
  
  <p>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?  <strong>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 &amp; Packages".</strong></p>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
     &lt;div class="nav_button" style="width: 25px"&gt;&lt;/div&gt;
     &lt;div class="nav_button" style="width: 175px"&gt;
         &lt;a href="index.html"&gt;Home&lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="nav_button" style="width: 250px"&gt;
         &lt;a href="rates.html"&gt;Rates &amp;amp; Packages&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav_button" style="width: 175px"&gt;
          &lt;a href="about.html"&gt;About Us&lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="nav_button" style="width: 150px"&gt;
         &lt;a href="menu.html"&gt;Menu&lt;/a&gt;
     &lt;/div&gt;
      &lt;div class="nav_button" style="width: 250px"&gt;
        &lt;a href="attractions.html"&gt;Nearby Attractions&lt;/a&gt;
      &lt;/div&gt;
     &lt;div class="nav_button" style="width: 25px"&gt;
  &lt;/div&gt;
  </code></pre>