CSS Footer Fixed Width, Bottom of screen, and centred

Question

I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.

I want to make my footer have the following properties:

• Fixed width of 640px
• Centered
• Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom

All the other styling I can do myself, it's just positional styling that I find really difficult.

Can someone please explain to me how to do this in just CSS.

Answer 1

footer {
    width: 640px;
    margin: 0% -320px;
    position: fixed;
    left: 50%;
    bottom: 0%;
}

Example: http://jsbin.com/imisig/3

Example with heaps of text: http://jsbin.com/imisig/4

Answer 2

Put the footer HTML into a <div id="footer">. And the CSS would be something like this:

#footer {
    width: 640px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -320px;
}

Explanation

• The width property sets the width to 640px
• position: fixed will make it so it scrolls with the page
• bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
• left: 50% puts the left side of the div to the center of the page
• margin-left: -320px - now we have to move it 320px from the left to make it centered