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.)

Here's the html:

```
        <div id="nav_container">
            <div id="timeline_nav">
                <!--<a class="arrow left" />-->
                <a class="toggle"/>
                <a class="toggle"/>
                <a class="toggle"/>             
                <a class="toggle"/>
                <!--<a class="arrow right disabled" />-->
            </div>          
        </div>          

```

And the css:

```
#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; }

```

**Any ideas how to fix this?**