Footer position - bottom and center

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