Question

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?

Answer 1

It is going to the left because you are using float: left;, which brings the achors outside of normal flow. What you probably meant to do was set the anchors to display: inline-block; and center the contents of the DIV. This should be supported in all browsers as IE6 supports inline-block on elements that are originally inline.