I have a footer that i want to attach to the bottom of the page using bottom:0px. However, I also want to center it by using margin-left:auto; and margin-right:auto;. Effectively, this will stick the footer to the bottom of the page while keeping it centered vertically.

Unfortunately, these cannot be used together as bottom:0px requires position:relative while margin-left:auto and margin-right:auto require position:absolute.

How can I get both of these attributes onto the same div without creating a container?

If not possible, what is a clean way of getting both these attributes?

ALSO: I do NOT want to have a fixed position.

footer.css:

.footer
{
    /*background-color:blue;*/


    min-height:10px;
    width:940px;


    margin-top:5px;
    margin-left:auto; /* WILL ONLY WORK IF POSITION IS RELATIVE */
    margin-right:auto;
    padding:5px;

    display:block;

    border-top: 3px solid #CCCCCC;

    text-align: center;
    font-family:arial;
    color:gray;

    position: relative;

    bottom:0px; /* WILL ONLY WORK IF POSITION IS ABSOLUTE */
}

Thanks.