Question

Possible Duplicate:
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?

I am trying to create a menu which has a background image spanning the full width of the screen with the menu contents constrained to 980px in the middle with the menu contents then aligned within the center of that.

Like this: http://d.pr/i/eYcV

But I don’t want to constrain the area anymore than 980px as the menu items may increase in the future.

I have the following structure in HTML:

<div class="menu">
  <nav class="primary_menu">
      <ul id="menu-primary">
           <li><a href="http://localhost:8888/maldonfire/">Home</a></li>
           <li><a href="http://localhost:8888/maldonfire/blog/">Blog</a></li>
      </ul>
  </nav>        
</div>

With the following CSS:

/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}

Thanks

Answer 1

There’re a lot of ways to achieve what you’re asking for … simplest is by using inline-blocks like this

.primary_menu ul{
    text-align: center;
}
.primary_menu ul li{
    /*float: left;*/
    display:inline-block;
    margin: 0 20px;
    *display : inline; /* for IE7 and below */
    zoom:1;
}

Check my answer here : Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?