title: Centering Footer With CSS/HTML
body: <p>I have a problem centering the copyright footer on my website.  I have two icons on the left (Facebook and Twitter), but if I add another for MySpace, it goes off.  How can I fix this?  Can it be indefinitely centered so I won't have to change it every time?  Thanks.</p>
  
  <p>TEMPLATE:</p>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;div class="social"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://www.facebook.com/DearRicky" target="_blank" title="Facebook"&gt;&lt;img src="../images/icons/facebook.png" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.twitter.com/DearRicky" target="_blank" title="Twitter"&gt;&lt;img src="../images/icons/twitter.png" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="copyright"&gt;
          Copyright &amp;copy; 2011 Ricky Wai Kit Tsang.  All rights reserved.
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#footer {
      margin: 0px auto;
      padding-bottom: 60px;
      width: 850px;
  }
  
  #footer .social {
      float: left;
  }
  
  #footer .social ul {
      list-style: none;
      margin: 10px 0px 0px;
      padding: 0px;
  }
  
  #footer .social li {
      float: left;
      margin-right: 5px;
  }
  
  #footer .social img {
      border: 0px;
  }
  
  #footer .copyright {
      color: #fff;
      float: left;
      line-height: 32px;
      margin-left: 200px;
      margin-top: 10px;
      text-align: center;
  }
  
  #footer .resize {
      float: right;
      width: 400px;
  }
  </code></pre>