CODEWITHSUNDEEP
htmlcssnavigationnav
Johnny Appal
Johnny Appal

Reputation: 661

HTML/CSS - Center nav bar of variable size

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?

Upvotes: 1

Views: 2504

Answers (3)

ChrisBenyamin
ChrisBenyamin

Reputation: 1728

You could read the width by Javascript and add it dynamic to your #nav_container. Afterwards you can align the Container with margin: 0 auto;

Upvotes: 0

dianovich
dianovich

Reputation: 2287

My preferred approach in this case is to set the container element to text-align: center; and the element you want centered to display: inline-block;

You will have to set the centered element to display 'inline' in IE < 8;

#nav-container {
  text-align: center;
}

#timeline-nav {
  display: inline-block;
  *display: inline; /* IE6 and IE7 hack */
}

But i'm no Eric Meyer so...

Upvotes: 0

Kevin Peno
Kevin Peno

Reputation: 9206

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.

Upvotes: 3

Related Questions