0

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?

Community
  • 1
  • 1
JStark
  • 2,788
  • 2
  • 29
  • 37

2 Answers2

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;
}
Smamatti
  • 3,901
  • 3
  • 32
  • 43
  • I transformed the double `id="inner-menu"` into a `class`. - You could go for two ids and set the `width` and `height` of the menus in the CSS file (better style/practice). – Smamatti Nov 11 '11 at 20:17
1

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;
}
ZeljkoSi
  • 64
  • 4
  • Welcome to Stack Overflow! Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – codingbadger Nov 11 '11 at 20:37
  • I've fixed my post, thanks for the heads up and the nice welcome^^ – ZeljkoSi Nov 11 '11 at 20:49