Can't Center Fixed Div

Question

I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.

HTML :

<div id="menucontainer">
    <div id="menu">
        <ul>
            <li><a href="http://www.uah.edu"><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></a></li>
            <li>another big test</li>
        </ul>
    </div>
</div>

CSS :

#menucontainer{
    position:fixed;
    bottom:0;
}

#menu{
    position:fixed;
    padding-top:5px;
    padding-bottom:15px;
    background-color:rgba(0,0,0,0.5);
    bottom:0px;
    height:200px;
    width:1218px;
    border:3px solid #000000;
    box-shadow:0px -5px 5px #888888;
}

li{
    float:left;
    margin-left:-10px;
    margin-right:-10px;
    text-align:center;
    list-style:none;
    height:190px;
    width:300px;
    border-left:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}

Please filter your code so we see *only* the relevant parts to your question. — ʰᵈˑ, Dec 23 '13 at 15:08
I think OP wants to centre the #menucontainer by the look o the css, the code given could of definitely been shorter and more precise. It is harder to tell what part of the centering is not working — Huangism, Dec 23 '13 at 15:10
Also, try to duplicate the layout in any html/css sandbox (fiddle or any other). This could lead you to the answer. — Mihey Egoroff, Dec 23 '13 at 15:10

score 0 · Accepted Answer · answered Dec 23 '13 at 15:15

This should be all you need:

#menucontainer {
    position: fixed;
    bottom: 0;
    width: 100%; /* ADD - make sure this container spans the entire screen */
    text-align: center; /* Align contents to the center */
}

#menu {
    /* remove position: fixed */
    display: inline-block; 
    margin: 0 auto;   /* Centers the block */
    text-align: left; /* Reset the text alignment */
    ... /* The rest stays the same */
}

score 0 · Answer 2 · answered Dec 23 '13 at 15:56

   <style>
        #menucontainer{
        position:absolute;
        bottom: -420px;
        height: 200px;
        margin: 0 auto;
        position: relative;
        width:1218px;
        }

        #menu{
        position: relative;
        padding-top:5px;
        padding-bottom:15px;
        background-color:rgba(0,0,0,0.5);
        bottom:0px;
        height:200px;
        border:3px solid #000000;
        box-shadow:0px -5px 5px #888888;
        }

        li{
        float:left;
        margin-left:-10px;
        margin-right:-10px;
        text-align:center;
        list-style:none;
        height:190px;
        width:300px;
        border-left:2px solid #FFFFFF;
        border-right:2px solid #FFFFFF;
        }
       </style

enter image description here

score 0 · Answer 3 · edited May 23 '17 at 12:03

DEMO

I've made some fundamential changes. Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.

#menucontainer{
    position:relative; 
    width: 1218px;
    height:200px;
    margin: 0 auto;   
}

Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.

I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).

Sticky footer technique has been taken from CSS Tricks site

Any questions? Is that what you was looking for?

Can't Center Fixed Div

3 Answers3