I've noticed that many solutions shared here seem to be overly complicated for what should be a simple task. My goal is to have a footer that remains fixed at the bottom of the screen regardless of page length. Although everything else seems to be working properly, I can't seem to get the footer centered; it always aligns to the left. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/n4xxj/
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
div {
width: 960px;
margin: auto;
}
#content {
background-color: beige;
border: 1px solid;
height: 1200px;
margin-top: 100px;
margin-bottom: 150px;
}
#footer {
background-color: lightgray;
border: solid 1px;
height: 100px;
position: fixed;
bottom: 0px;
}