Footer links not centering - pls help

Discussion in 'HTML & Website Design' started by fechto, Jul 10, 2009.

  1. #1
    Hey All,

    So I'm putting a site together from a template. Part of the changes I'm making include rearranging the footer links. The way it came things were positioned with padding - I'd like to center, but for the life of me I can't figure out how.

    Here's the complete code. the only thing missing is a site-center <div> with the properties {margin:0 auto; width:880px; text-align:left;}

    here's the code:

    <div class="footer">
    <div class="border-top">
    <div class="border-bot ">
    <div class="border-left">
    <div class="border-right">
    <div class="corner-top-left">
    <div class="corner-top-right">
    <div class="corner-bot-left ">
    <div class="corner-bot-right">
    <div class="footer-indent">
    <div class="row-box">
    <div class="row-box-1"><strong>Contact us:</strong></div>
    <div class="row-box-2">
    <ul>
    <li class="left-none"><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Duis aute irure dolor</a></li>
    <li><a href="#">Excepteur sint</a></li>
    <li class="bg-none">555101 Photos online (700 000 12213)</li>
    </ul>
    </div>
    </div>
    <div class="row-box">

    <div class="row-box-21">
    <ul>
    <li><a href="#">Blogs</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Advanced search </a></li>
    <li><a href="#">Randomizer</a></li>
    <li><a href="#">Lightboxes</a></li>
    <li class="bg-none"><a href="#">Statistics</a></li>
    </ul>
    </div>
    </div>
    <div class="indent">Merola Duct Cleaning &copy; 2009 | <a href="#">Privacy policy</a></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    And here's the css:

    footer{ margin:23px 0 43px 0; font-size:0.812em;}
    .footer .row-box-1{ width:120px; padding-left: 59px;}
    .footer .row-box-2{ width:693px;}
    .footer .row-box-21{ width:876px; border: 1px solid black;}
    .footer .row-box-21 ul { margin: 0 auto;}
    .footer .border-top {background:url(images/border2.gif) repeat-x top #f3f3f3;}
    .footer .border-bot {background:url(images/border2.gif) repeat-x bottom;}
    .footer .border-left {background:url(images/border2.gif) repeat-y left;}
    .footer .border-right {background:url(images/border2.gif) repeat-y right;}
    .footer .corner-top-left {background:url(images/corner2_top_left.gif) no-repeat left top;}
    .footer .corner-top-right {background:url(images/corner2_top_right.gif) no-repeat right top;}
    .footer .corner-bot-left {background:url(images/corner2_bot_left.gif) no-repeat left bottom;}
    .footer .corner-bot-right {background:url(images/corner2_bot_right.gif) no-repeat right bottom; width:100%; }
    .footer-indent{ padding:22px 0 26px 0px; border: 1px solid pink;}
    .footer li{ float:left; display:block; background:url(images/footer_divider.gif) right center no-repeat; padding:0 8px;}
    .footer li a{ color:#747272; text-decoration:none; }
    .footer li a:hover{ color:#f57907;}
    .footer .row-box{ padding-bottom:14px;}
    .left-none{ padding-left:0 !important;}
    .footer .indent{ padding:0 0 0 265px;}
    .footer .indent a{ color:#747272;}

    I'd like row-box-21 to be centered. I've added borders to try and figure out whats up...but no dice.

    Thanks in advance for your help! I'll check back in a few hours.

    Aaron
     
    fechto, Jul 10, 2009 IP