title: Sticky Footer Issues
body: <p>I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.</p>
  
  <p>If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.</p>
  
  <p>I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.</p>
  
  <p>Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.</p>
  
  <p>Below is my css for the content div:</p>
  
  <pre><code>#content {
                  margin-top: 15px;                   
                  padding-bottom:100px; /* Height of the footer element */
                  border-left: 1px solid #C9C9C9;
                  border-right: 1px solid #C9C9C9;
                  border-bottom: 2px solid #C9C9C9;                    
                  box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;                    
                  width: 1024px; /* Here adding a width causes the footer to overlap */
                  margin-left:auto;
                  margin-right:auto;
                  background-color: white;
                  text-align: center;
                  border: 1px solid red;
              }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/32M9Q/1/" rel="nofollow">http://jsfiddle.net/32M9Q/1/</a></p>