Center a fixed position div in IE7+

This will be more helpful to any web designers who might happen to come across this. I’m working on a website that has a fixed menu at the top of the screen, complete with transparent background that provides a cool effect when the rest of the page content scrolls under it. As usual, Internet Explorer was being troublesome, as it doesn’t like to accept margin values of “auto” when an object is set to a fixed position. After much Google searching, and many failed methods, I finally decided to put my head to it and come up with my own solution. I have no doubt that I am not the first person to come up with this. However, I was completely unable to find this method explained anywhere else. So here’s how I solved the problem:

I created three DIV elements (honestly, I’m not sure the middle one is necessary, but I would rather it work with “too many” than too few), with this structure:
<div id="head>
<div id="head_wrap">
<div id="headpanel">
<ul>
<li>.....</li> (etc)
</ul>
</div>
</div>
</div>

I then set up my style sheet like this:
#head {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#head_wrap {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#headpanel {
position: relative;
width: 960px; /*This is the same width as the rest of the content on my page*/
margin: 0 auto;
}
#headpanel ul {
list-style: none;
}
#headpanel ul li {
float: left;
position: relative;
}

With only 1 DIV around the unordered list that contains my links, a property of position: fixed; resulted in left alignment for IE. With the 3 DIVs, the problem was (finally) solved. Hopefully this helps someone else out there, too. 🙂

-Jeremy