CSS: fixed to bottom and centered

Question

I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can\'t just center it via margin-left: xxpx;

Answer 1

Based on the comment from @Michael:

There is a better way to do this. Simply create the body with position:relative and a padding the size of the footer + the space between content and footer you want. Then just make a footer div with an absolute and bottom:0.

I went digging for the explanation and it boils down to this:

• By default, absolute position of bottom:0px sets it to the bottom of the window...not the bottom of the page.
• Relative positioning an element resets the scope of its children's absolute position...so by setting the body to relative positioning, the absolute position of bottom:0px now truly reflects the bottom of the page.

More details at http://css-tricks.com/absolute-positioning-inside-relative-positioning/