Question

I cant seem to be able to center #testmenu no matter what… I’ve tried dozens of combinations in CSS but without luck. Please take a minute to have a look and save my hair from being completely pulled out.

#abc {
    position:absolute; 
  bottom: 0;
    width:100%;
    left:0;
    text-align:center; /* IE 5.x centering */
}

#testmenu {
    line-height:2em;
    width:960px;
    color:#FFF;
    background:#00F;
  background:#C00;
    margin:0 auto;
}

<div id="abc">
    <div id="testmenu">
        This should remain 'fixed' bottom center.
    </div>
</div>

Here’s a simple jsfiddle of what I’m after: http://jsfiddle.net/mXTmF and also working demo of the page: http://ht-webcreations.com/vildiridis/index.php

Answer 1

The problem is that you can’t apply auto margins to a fixed element. To allow for varying menu widths, I’d do this:

#abc {
    bottom: 0;
    height: 30px; /* forces #testmenu to the bottom */
    margin: 0 auto;
    position: fixed;
    width: 100%;
}
#testmenu {
    background: none repeat scroll 0 0 #FF0000;
    bottom: 0;
    font-size: 10px;
    height: 30px;
    overflow: hidden; /* prevents extra space underneath from 33px-high menu items */
    margin: 0 auto;
    max-width: 1000px;
    width: 960px;
}