Question

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.

TEMPLATE:

<div id="footer">
    <div class="social">
        <ul>
            <li><a href="http://www.facebook.com/DearRicky" target="_blank" title="Facebook"><img src="../images/icons/facebook.png" /></a></li>
            <li><a href="http://www.twitter.com/DearRicky" target="_blank" title="Twitter"><img src="../images/icons/twitter.png" /></a></li>
        </ul>
    </div>
    <div class="copyright">
        Copyright &copy; 2011 Ricky Wai Kit Tsang.  All rights reserved.
    </div>
    <div class="clear"></div>
</div>

CSS:

#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;
}

Answer 1

HTML

<div id="footer">
<div class="copyright">
    Copyright &copy; 2011 Ricky Wai Kit Tsang.  All rights reserved.
</div>
<div class="social">
    <ul>
        <li><a href="http://www.facebook.com/DearRicky" target="_blank" title="Facebook"><img src="../images/icons/facebook.png" /></a></li>
        <li><a href="http://www.twitter.com/DearRicky" target="_blank" title="Twitter"><img src="../images/icons/twitter.png" /></a></li>
        <li><a href="http://www.myspace.com/DearRicky" target="_blank" title="MySpace"><img src="../images/icons/myspace.png" /></a></li>
    </ul>
</div>
</div>

CSS

#footer {
margin: 0px auto;
width: 850px;
}    
#footer .social {
padding: 30px 0;
width: 425px;
text-align: center;
}
#footer .copyright {
float: right;
padding: 30px 0;
width: 425px;
text-align: center;
}