在主/父div中居中2个不同大小的div

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

Answer 2

I think Smamatti has got a nice solution. I came up with more or less the same thing, the only difference is I removed all the inline styling.

http://jsfiddle.net/S1l3/YVdFq/4/

The HTML:

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

The CSS:

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

.inner-menu
{
    display:inline-block;
    background:#ccc;
}