I am facing an issue with my code, which you can find here: http://jsfiddle.net/NSzdm/
The problem arises when I try to place a footer at the bottom of the page. The layout I desire is for the main content wrapper to be centered, but the footer should come after it. However, in my current implementation, the footer is not positioned correctly. You can view all the code on the provided jsfiddle link.
Here is the CSS for the footer:
.footer {
margin: 50px 0 0 0;
background-color: #3a3a3a;
background-image: linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
background-image: -o-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
background-image: -moz-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
background-image: -webkit-linear-gradient(bottom, #3b3b3b 0%, #424242 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b3b3b', endColorstr='#ff424242',GradientType=0);
/* IE6-9 */
width: 100%;
height: 144px;
}