Question

I have 2 menus that need to be centered on a menubar. Needs to run well in IE7,IE8,IE9, Chrome, FF. For example purposes, I’ve added the width/height for both based on chrome measurements.

big menu:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:578px;height:32px;">Foo foo</div>
</div>

small menu:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

I tried setting the style to #inner { width: 50%; margin: auto; } as described in How to horizontally center a <div> in another <div>? but one menu is bigger than 50% so it gets clipped. The small one hangs to the left 20 pixels. During prototype we hacked it with jQuery but this isn’t desirable because the menu jumps after load.

Thoughts?

Answer 1

Possible solution

Colored borders for explanation.
http://jsfiddle.net/jnG4q/

862px > 800px, so they don’t fit in one row.
Smaller menus to view the sample:
http://jsfiddle.net/jnG4q/1

Wanted HTML

<div id="outer-menu-bar" style="width:800px;height:32px;">  
    <div class="inner-menu" style="width:578px;height:32px;">Foo foo</div>
    <div class="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

Additional CSS

#outer-menu-bar {
    text-align: center;
}

.inner-menu {
    display: inline-block;
}