title: footer at the bottom with horizontal line
body: <p>I am trying to put footer at the bottom with a horizontal line just above the footer. But I am not even able to get footer at the bottom. Tried many posts and blogs but I am missing out on something. I am using the base of some blog to create the signup page.</p>
  
  <p><a href="http://jsfiddle.net/750h2crz/" rel="nofollow">Fiddle</a></p>
  
  <h3>html</h3>
  
  <p></p>
  
  <pre><code>    &lt;div id="header"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="main"&gt; 
      &lt;div id="container"&gt;
  
    &lt;form action="index.html" method="post"&gt;
  
      &lt;p id="form_title" style='color:#808080'&gt;Create an Account&lt;/p&gt;
  
      &lt;fieldset&gt;
        &lt;legend style="color:#585858"&gt;Get started with Your Profile&lt;/legend&gt;
        &lt;label for="name" style='color:#808080;font-size:14px'&gt;CUSTOM NAME&lt;/label&gt;
        &lt;input type="text" id="name" name="user_name" style="color:#404040"&gt;
  
  
        &lt;label for="type" style='color:#808080;font-size:14px'&gt;TYPE&lt;/label&gt;
        &lt;select id="sel-type" name="type"&gt;
  
          &lt;option value="frontend_developer"&gt;Front-End Developer&lt;/option&gt;
          &lt;option value="php_developor"&gt;PHP Developer&lt;/option&gt;
          &lt;option value="python_developer"&gt;Python Developer&lt;/option&gt;
          &lt;option value="rails_developer"&gt; Rails Developer&lt;/option&gt;
          &lt;option value="web_designer"&gt;Web Designer&lt;/option&gt;
          &lt;option value="WordPress_developer"&gt;WordPress Developer&lt;/option&gt;
  
  
      &lt;/select&gt;
      &lt;label for="type" style='color:#808080;font-size:14px'&gt;REGION&lt;/label&gt;
      &lt;select id="sel-region" name="region"&gt;
  
          &lt;option value="frontend_developer"&gt;Front-End Developer&lt;/option&gt;
          &lt;option value="php_developor"&gt;PHP Developer&lt;/option&gt;
          &lt;option value="python_developer"&gt;Python Developer&lt;/option&gt;
          &lt;option value="rails_developer"&gt; Rails Developer&lt;/option&gt;
          &lt;option value="web_designer"&gt;Web Designer&lt;/option&gt;
          &lt;option value="WordPress_developer"&gt;WordPress Developer&lt;/option&gt;
  
  
      &lt;/select&gt;
  
  
      &lt;/fieldset&gt;
      &lt;button type="submit"&gt;Create Profile&lt;/button&gt;
    &lt;/form&gt;
  
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      &lt;a href="About"&gt;About&lt;/a&gt;
      &lt;a href="info.com"&gt;Instructions&lt;/a&gt;
  
  
  
  &lt;a href="tt.com"&gt;Encountered an issue?&lt;/a&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <h3>css</h3>
  
  <pre><code>*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   }
  
  body {
   font-family: 'Lato';
   background-color: #E8E8E8;
  
  }
  
  #header {
     width:100%;
     background-color: #27272D;
     height: 50px ;
     border:1px solid;
     position:relative;
  
  }
  #main{
     border:1px solid;
  
     width:100%;
     height:100%;
  }
  
  #container{
  
      margin-top: 100px;
      border:1px;
  }
  
    form {
     max-width: 300px;
     margin: 10px auto;
     padding: 10px 20px;
     border-radius: 3px;
     background-color: white;
     border:1px;
       }
  
    #form_title {
      margin: 10px 0 30px 15px;
      font-size:20px;
     }
  
   input[type="text"],
   select {
     background: rgba(255,255,255,0.1);
     border: none;
     font-size: 16px;
     height: auto;
     margin: 0;
     outline: 0;
     padding: 15px;
     width: 100%;
     background-color: #e8eeef;
     color: #8a97a0;
     box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
     margin-bottom: 20px;
    }
  
     input[type="text"]{
        border-radius: 6px;
       -moz-border-radius: 6px;
       -khtml-border-radius: 6px;
       -webkit-border-radius: 6px;
       height:44px;
       font-size: 14px;
        }
  
  
    select {
     padding: 6px;
     height: 44px;
     border-radius: 2px;
    }
  
   button {
  
     color: #FFF;
     background-color: #13ABAF;
     font-size: 14px;
     text-align: center;
     font-style: normal;
     border-radius: 5px;
     width: 96%;
     height:44px;
     border: 1px solid;
     border-width: 1px 1px 3px;
     margin-bottom: 10px;
     margin-left: 10px;
     }
  
    fieldset {
  
      border: none; 
    }
  
    legend {
      font-size: 17px;
      margin-bottom: 24px;
    }
  
    label {
     display: block;
     margin-bottom: 8px;
    }
  
    label.light {
     font-weight: 300;
     display: inline;
    }
  
  
  
    #horizontal-line{ 
  
       display: block;
       margin-top:100px;
       margin-bottom: 60px;
       width:96%;
       margin-left: auto;
       margin-right: auto;
       border-style: inset;
       border-width: 1px;
       border-color: #F0F0F0;
  
  
       } 
  
      #footer {
       position : absolute;
       bottom : 0;
       height:60px;
       margin-top : 40px;
       text-align: center ;
       font-size: 10px ;
       font-family: 'Lato' ;
       }
  
      @media screen and (min-width: 480px) {
  
      form {
        max-width: 480px;
       }
  
   }
  </code></pre>