title: HTML/CSS - Center nav bar of variable size
body: <p>I'm going to have a nav bar that lets a user sort through a gallery of pictures. The problem is the nav bar width is going to vary based on the size of the gallery, and when I don't set a width I can't use margin: 0 auto; to center the menu. (Instead, every shows up on the left side of the gallery container.)</p>
  
  <p>Here's the html:</p>
  
  <pre><code>        &lt;div id="nav_container"&gt;
              &lt;div id="timeline_nav"&gt;
                  &lt;!--&lt;a class="arrow left" /&gt;--&gt;
                  &lt;a class="toggle"/&gt;
                  &lt;a class="toggle"/&gt;
                  &lt;a class="toggle"/&gt;             
                  &lt;a class="toggle"/&gt;
                  &lt;!--&lt;a class="arrow right disabled" /&gt;--&gt;
              &lt;/div&gt;          
          &lt;/div&gt;          
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>#nav_container { width:100%;height:20px; position:absolute; bottom:10px; background-color:#000;}
  #timeline_nav { position:relative;margin:0 auto; }
  #timeline_nav a { display:block; float:left; cursor:pointer; overflow:hidden; }
  #timeline_nav a.toggle { width:4px; height:4px; padding:2px; margin:0 2px; background:url(http://images.apple.com/iphone/gallery/images/nav-ticks-20100607.png) 50% 0 no-repeat; }
  </code></pre>
  
  
  
  <p><strong>Any ideas how to fix this?</strong></p>