Footer not sitting at bottom of container div

I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.

the CSS:

html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}

#footer {
    width:100%;
    display:block;
    background-color:#4a4a4a;
    color:#fff;
    font-family:'discoregular';
    left:-5%;
    bottom:0;
    top:100%;
    height:100%;
    text-align:center;
    float:left;
    position:relative;
    body:before;
    content:"";
    overflow:auto;
    margin-top:50px;
    padding:10px;
}

#footer, #push{
    height:50px;
}

.clearboth {
clear:both;

}

The HTML:

<body><div id="container">
 <!--Content-->
 <div id="push"></div>
   </div>
 <div class="clearboth"></div>
 <div id="footer">Footer Content</div>

Solution

You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>

<body><div id="container">
 <!--Content-->
 <div id="push"></div>
   </div>
 <div class="clearboth"></div>
 <div id="footer">Footer Content</div>

and your css, I took away the left -5%:

#page {
      min-height: 100%;
      position:relative;
}

#main {
      padding-bottom: 50px;
}

#footer {
    background-color:#4a4a4a;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 50px;
    padding:10px;
    font-family:'discoregular';
    display: block;
    overflow:auto;
    text-align:center;
    float:left;
    margin-top:50px;

}