Can someone help me keep the footer at the bottom of the page?

I've looked up how to stick the footer to the bottom of the page but i'm having trouble making it actually work! If i post my code can you look at it and change it to make it work, but also explain how you did it?

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Aaron Kelsey - Home</title>`enter code here`

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>
    <div id="wrapper">
        <div class="header_wrapper">

            <ul id="navigation">
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="work.html">WORK</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>  
            <div id="line-1"></div>
            <div id="line-2"></div>
        <div class="content">
            <img class="header" src="images/header.png">


        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

CSS

* {
   margin: 0px;
   padding: 0px;
}

body{
    margin: 0 auto;
    padding:0;
    margin: 0;
    height: 100%;
    background-color: #F5F5F5;
}

img.header{
    display: table;
    margin: 0 auto;
}

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

.header_wrapper{
    display: table;
    margin: 0 auto;
    width: 1000px;
    height: 50px;
    position: relative;
    padding:10px;
}

.content{
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    min-height: 100%;
    padding:10px;
    padding-bottom:150px;
}

.footer{
    position: absolute;
    margin: 0 auto;
    bottom: 0px;
    width: 100%;
    height: 150px;  
    background-color: #E0E0E0;
}

#line-1{
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    top: 10px;
}

#line-2{
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    top: 50px;
}

#navigation {
    position: relative;
    width: 1000px;
    height: 10px;
    font-size: 18px;
    font-family: Arial;
    font-weight: bold;
    top: 20px;
    text-align: center;
}

#navigation li { 
    display: inline; 
    padding: 50px; 
}

#navigation a {
    text-decoration: none;
    color: #A9A9A9;
}

#navigation a:hover {
    color: #1e1e1e;
}

Solution

You have your footer inside of the wrapper. It is fixed at the bottom of that div but not the body.

take the footer div outside of your wrapper and it is good to go.

<div id="wrapper">
  <div class="header_wrapper">
      <ul id="navigation">
          <li><a href="index.html">HOME</a>
          </li>
          <li><a href="about.html">ABOUT</a>
          </li>
          <li><a href="work.html">WORK</a>
          </li>
          <li><a href="contact.html">CONTACT</a>
          </li>
      </ul>
  </div>
  <div id="line-1"></div>
  <div id="line-2"></div>
  <div class="content">
      <img class="header" src="images/header.png" />
  </div>
</div>
<div class="footer"></div>

JSFIDDLE

Also in your footer you don't need to have margin: 0 auto; since it is 100%. The next thing is close your image tags like so, <img src="" alt="" />.