Footer width and position queries

Question

for some reason I can't get my footer to stick to the bottom of the page

EDIT: I am trying to keep it at the bottom of the page, not the bottom of the window

and the even though I have set it to width:100% it seems to be 100% of the width of the previous div rather than 100% of the page.

Here is the jsFiddle of the entire page : http://jsfiddle.net/eehSa/1/

The css code I am using for the footer is:

#footer {height:50px; width:100%; background-color:red; position:absolute; bottom:0px;}

Answer 1

Set position:absolute to position:fixed for footer

EDIT:

Apply a CSS Reset *{padding:0;margin:0;} then change the position of the footer to relative and remove the top from the container.

Demo:

http://fiddle.jshell.net/Nw7ej/show/

Answer 2

You need to set the left value left: 0; and a fixed position position:fixed;

 #footer #footer {height:50px; width:100%; background-color:red; position:fixed; bottom:0px;left: 0;}

live Demo

UPDATE

#container {height:100%;
position: relative;
width: 90%;
margin: 0 0 20% 5%;/* add some magrin-bottom*/
background-color: white;
top: 80px;
}

on the body :

   body {background-color:lightgray; padding:0;margin:0;}/* add padding and margin*/

position relatve

 #footer {height:50px; width:100%; background-color:red; position:relative; bottom:0px;left: 0;clear:both;}

Live Demo:

Answer 3

There's some steps you need to do for that, Try this : http://jsfiddle.net/eehSa/4/

html,body{                       /** Add new style to html,body */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color:lightgray;
    position: relative;         /** New */ 
    height: auto;               /** New */
    min-height: 100%;           /** New */
    padding-bottom: 75px;       /** New, equal to footer height + x */
}
#footer {
    height:50px; 
    width:100%; 
    background-color:red; 
    position:absolute; 
    bottom:0px;
    left: 0;                    /** New */
}