Footer position - bottom and center [duplicate]

Question

I am writing a webpage with a fixed footer on the bottom of the page. The content of the page has a specific width and is centered. The footer also has a specific width and must be centered.

Issues:

1. I cant use postiton: fixed - footer is not centered
2. Page content is loaded dynamically from a database, so I can't know the exact height
3. If the browser window is very small, the footer hits the content and covers it. A z-index hardly fixes it because I have a gradient on the background set like a body background.

So I would need something like float: bottom....

Answer 1

Although the other answers do work, you should avoid using negative margins.

Try this:

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

And the HTML would be:

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

---------- Edit ------------

You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content

Answer 2

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

Check working example at http://jsfiddle.net/qdVbR/