title: Position absolute and margin: auto
body: <p>I've got a small problem, I want my footer to stay at the bottom of the screen with <code>position: absolute</code>. But my <code>margin: auto</code> to put it in the middle of the screen isn't working anymore.</p>
  
  <p>html: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'&gt;
          &lt;link rel="shortcut icon" href="../IMAGES/favicon.ico"&gt;
          &lt;title&gt;TEST&lt;/title&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'&gt;
          &lt;link rel="stylesheet" href="../css/stylesheet.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div id="logo"&gt;
                  &lt;img src="../IMAGES/logo.png" /&gt;
              &lt;/div&gt;
              &lt;div id="logotitel"&gt;
                  Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="nav"&gt;
              &lt;div id="links"&gt;
                  &lt;a href="index.php"&gt;&lt;div class="link"&gt;Home&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="wie.php"&gt;&lt;div class="link"&gt;Wie is wie&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="fotos.php"&gt;&lt;div class="link"&gt;Foto's&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="repertoire.php"&gt;&lt;div class="link"&gt;Repertoire&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="links.php"&gt;&lt;div class="link"&gt;Links&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="contact.php"&gt;&lt;div class="link"&gt;Contact&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div id="content"&gt;
              TEST
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;div id="copy"&gt;
                  Developed by Yoshi &amp;copy vAntstAd
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* PAGE LAYOUT */
  html
  {
          padding: 0px;
          margin: 0px;
  }
  
  body
  {
          background-image: url(../IMAGES/background.png);
          padding: 0px;
          margin: 0px;
          color: white;
          font-family: 'Source Sans Pro', serif, sans-serif;
  }
  
  .clear
  {
          clear: both;
  }
  
  /* HEADER */
  #header
  {
          width: 1100px;
          height: 150px;
          background-color: #282828;
          margin: auto;
          border-bottom: solid;
          border-color: red;
  }
  
  #logo
  {
          width: 283px;
          height: 100px;
          margin: auto;
  }
  
  #logotitel
  {
          width: 1100px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: x-large;
  }
  
  /* NAV */
  #nav
  {
          width: 1100px;
          height: 50px;
          margin-top: 25px;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 25px;
          background-color: red;
  }
  
  #links
  {
          width: 600px;
          height: 50px;
          margin: auto;
  }
  
  .link
  {
          width: 100px;
          height: 50px;
          line-height: 50px;
          float: left;
          text-align: center;
          color: white;
          text-decoration: none;
  }
  
  .link:hover
  {
          color: #282828;
          text-decoration: underline;
  }
  
  /* CONTENT */
  
  #content
  {
          width: 1100px;
          height: auto;
          margin: auto;
          color: #282828;
          position: relative;
  }
  
  /* FOOTER */
  
  #footer
  {
          width: 1100PX;
          height: 50px;
          position: absolute;
          bottom: 0;
          margin: auto;
          background-color: #282828;
  }
  
  #copy
  {
          width: auto;
          float: right;
          margin-right: 5px;
          height: 50px;
          line-height: 50px;
  }
  </code></pre>