Footer Centering Help

I have a ve开发者_Go百科ry 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

---

You just need to set the width of your footer and then give it a margin:0 auto where 0 stands for the top and bottom margins and auto is for the left and right.

---

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.

---

Simply set the width: 950px, and margin-left:auto; margin-right:auto;.

With the left/right margins at auto, the <div> will be centered. Once the size of the browser gets down to the point where scrolling is needed, the browser will not shrink your <div>, it will just require left/right scrolling, which is needed for your content anyway.

---

I think you could solve it with a little bit of CSS:

html & php:

<div id="footer">
<?php include("footer.php"); ?>
</div>

CSS:

#footer {
margin: 0 auto;
text-align: center;
}

Hope this helps! :)