centering a transparent menu - html

Question

I am trying to make my transparent menu appear centered, but whatever method I dig up from the internet, nothing seems to do the trick.
I would really love if someone could look through this code, and give me a hand. :)
The HTML-part:
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
The CSS part:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}

Answer 1

You can do it by updating #menu to:
#menu {
position: absolute;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
left: 50%;
margin-left: -152px;
width: 305px;
}
JSFiddle

Answer 2

The reason that your menu is not centering, is because you do not have a defined width for either the menu or the container. If you had a defined width, then you would be able to use:
margin: 0 auto;
I'm not sure yet why your float starts messing up your background colors, however I did notice you missed a semicolon at the end of one of your style properties
#container
{
padding: 10px 0 0 0
...
}
should be
#container
{
padding: 10px 0 0 0;
...
}

Answer 3

Another option:
EDITED CSS:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu ul { <===Added this definition and moved the border here as well
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}​
EDITED HTML (closed a div tag)
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>​
And here's the FIDDLE

Answer 4

Centering floats is difficult. Here's one method:
<style type="text/css">
#container
{
font-family:arial;
height:400px;
border: red;
position: relative;
}
#menu
{
position:relative;
left:-50%;
float:right;
}
ul
{
position:relative;
left:50%;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
li{
display:block;
float:left;
padding: 8px 13px;
}
a {text-decoration:none;}
</style>
<div id="container">
<div id="menu">
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>
Source: http://browse-tutorials.com/snippet/center-floats-css
Fiddle: http://jsfiddle.net/yucHM/2/