putting menu in header - html

Question

I have the following:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
div {
height: 178px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 1100px;
}
#left {
background: url(left.gif) repeat-x;
}
#center {
background: url(center.gif) no-repeat center center;
}
#right {
background: url(right.gif) repeat-x;
}
See: fiddle
I want to put a horizontal menu in orange part of center section and another horizontal menu in yellow part;
I tried this:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center">
<ul id="menu1">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
</div>
<div id="right"></div>
</div>
Added CSS:
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
See: fiddle
But no had no success, please help!

Answer 1

You can use relative positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning) e.g.
http://jsfiddle.net/67UWv/
css
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
edit - related to last comments
in order to remove the white spacing around the menu image it is required to set margin:0 for the body element to override the default user agent style rules.
body{
margin:0px;
}
http://jsfiddle.net/67UWv/1/
edit - response to the latest comments
The white gap noticed was caused in ff from the beginning (test original fiddle http://jsfiddle.net/6GE3x/27/show/ ) when content was placed within #center div. So there is some issue there when using display:table and display:table-cell and also adding content.
In order to avoid using an actual table for layout and all the consequences related to them, it is possible to position the center part using absolute layout as follows,
http://jsfiddle.net/eH2m6/show/
http://jsfiddle.net/eH2m6/
css
div {
height: 178px;
}
#wrapper {
/* display: table;
table-layout: fixed; */
width: 100%;
}
#left, #right {
/* display: table-cell; */
/*the following will make #left and #right take full width*/
float:left;
width:50%;
}
#center {
width: 1100px;
/*the following will position #center in the center*/
position:absolute;
left:50%;
margin-left:-550px;
}
#left {
background: url(http://dentaliran.ir/left.gif) repeat-x;
}
#center {
background: url(http://dentaliran.ir/center.gif) no-repeat center center;
}
#right {
background: url(http://dentaliran.ir/right.gif) repeat-x;
}
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
body{
margin:0px;
}
has been tested in ie8,ie9,chrome32.x,ff25.x