Question

I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.

I am not quite sure what is wrong… Any ideas?
Thank you in advance.

HTML :

<div id='main'>
</div>

<div id='footer'>Centered Text</div>​

CSS :

* {
    padding: 0;
    margin:  0;
    font-size:   12px;
}

body {
    font-family: helvetica, serif;
    font-size:   12px;
    overflow-y:scroll;
}

#main {
    border: 1px solid #bbbbbb;
    margin: 3% 5%;
    padding: 10px 10px;
}

#footer {
    font-size: 75%;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
}

​

http://jsfiddle.net/DjPjj/2/

Answer 1

The reason it won’t center is because of the positon: absolute;.

Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;

http://jsfiddle.net/4fuk7/1/

Notice how the centered text is overwritten.

If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/

Sorry, the last one would scroll to the top. This one doesn’t, but you’d need to fiddle with it a bit to get it to properly align around the margin’s you’ve set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.