Question

I have a very simple question I believe. I have a footer.php that I put on my main page and all subpages (to make it easier so I can change the footer in one location). And I am trying to make it so the footer remains at the center of the fixed-width no matter what size the browser window is. For example, I want my pages to be 950px width and the footer always be in the center, so that even when I resize the browser to as small as it goes, it simply COVERS the footer, rather then moving it with the resized window. Much like apple.coms footer.

Thank you for your help

Answer 1

In your markup:

<div id="footer-container">
    <div id="footer">
        Footer stuff
    </div>
</div>

And in your CSS:

#footer-container {
    /* centering for IE */
    text-align: center;
}
#footer {
    width: 950px;
    /* undo text-align on container */
    text-align: left;
    /* centering for other browsers */
    margin: auto;
}

---

Edit: I was putting this comment on some of the other solutions, but deleted them because I didn’t want to copy/paste on all of them. Just please be aware that margin: auto doesn’t work in older versions of IE, so if you want to have the footer aligned in the middle, you’ll need to do some nesting, like I have in this one.