Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post

    Help centering my footer?

    Hello all,

    I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below:

    <div id="footer" align="center">
    <div class="container">
    <div class="leftFooter">
    <ul class="footerNavMain top">
    <li class="first"><a href=" ">Products</a></li>
    <li> | </li>
    <li><a href=" ">FAQ</a></li>
    <li> | </li>
    <li class="last"><a href=" ">Where To Find Us</a></li>
    </ul>

    <ul class="footerNavMain bottom">
    <li class="first">Phone Number</li>
    <li> | </li>
    <li class="last"><a href=" ">Email Link</a></li>
    </ul>

    <div class="copyright">
    <sup>&copy;</sup>
    2011 Copyright™, All Rights Reserved.
    </div><!-- copyright close div -->

    </div>
    <!-- left footer close div -->
    </div><!-- container close div -->
    </div>




    CSS

    #footer {
    background: url("/Assets/footer2.jpg") no-repeat scroll 0 0;
    display: block;
    float: left;
    height: 75px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    }


    #footer .container {
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 45px;
    padding-top: 3px;
    width: 900px;
    }

    #footer .leftFooter {
    background: none repeat scroll 0 0;
    color: #FFFFFF;
    display: block;
    float: left;
    height: 100%;
    margin-left: 5 px;
    overflow: hidden;
    position: relative;
    width: 900px;
    }

    #footer .rightFooter {
    background: none repeat scroll 0 0 #4E4E4E;
    color: #FFFFFF;
    display: block;
    float: right;
    height: 100%;
    margin-left: 15 px;
    position: relative;
    width: 355px;
    }

    #footer .copyright {
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    height: 15px;
    left: 0;
    line-height: 13px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 900px;
    z-index: 1;
    font-weight: 700;
    }
    #footer a:link{
    color: #FFFFFF;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }

    #footer a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;
    }

    #footer a:hover{
    color: #000000;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }

    #footer ul.footerNavMain {
    display: block;
    float: left;
    margin-top: 5px;
    width: 900px;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    #footer ul.footerNavMain.top {
    margin-left: 185px;
    width: 900px;
    }

    #footer ul.footerNavMain.bottom {
    margin-left: 145px;
    width: 900px;
    color: #000000;
    }

    #footer .footernavMain li {
    display: block;
    float: left;
    padding-left: 4px;
    padding-right: 4px;
    }


    #footernav li a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;
    }

    #footernav li a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;
    }

    #footernav li a:active {
    color: #000000;
    text-decoration: underline;
    font-size: 11px;
    }

    #header nav li.last, #footerNavMain li.last {
    padding right: 0;
    }

    #footer .footerNavMain li.first {
    background: none repeat scroll 0 0 transparent;
    padding-left:0;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello AChicken9,
    If you want your #footer centered you probably should not have it floated left.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto




    When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Last edited by Excavator; 01-30-2011 at 12:35 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Hello AChicken9,
    If you want your #footer centered you probably should not have it floated left.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Thanks Excavator! Sorry about the code tags, I'll be sure to do that in the future. I do have a couple questions on your feedback though, and I'm sorry if this is ignorant, I'm a noob.

    1.) a valid DocType

    I'm assuming you mean within <html> tags and such. I do have that, however for the purposes of this post, I only pulled the footer code. I can provide the full if it's easier?

    2.) An element with a width

    Here I'm really confused... because in my markup I identify the div ID as "footer" which based on my CSS has a width of 900 pixels?

    3.) that elements right/ left margins set to auto

    I have this also within my #footer class. Perhaps I'm oversimplifying this?


    As for the floating left, I thought that too, but when I remove it, it throws my footer background behind my content area (above the footer)... Perhaps I have bigger issues?
    Last edited by AChicken9; 02-01-2011 at 08:32 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    See the link about DocTypes in my signature line.

    Your footer centers fine on it's own with the float removed. If that breaks your layout then, yes, you do have other issues.
    Can you link us to the test site? Most likely just adding clear: both; to the CSS for #footer will fix what you describe.

    One thing I see right off is .container breaks the box model. According to the box model, what you put in an element cannot exceed the size of that element -margin/padding/border all count when figuring total widths.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks again Excavator!

    I read your right DocType article, and from this I'm taking this as I need to add:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> correct?


    The test site, ignore the URL as I'm just using an old domain I have, but you can view the test site at http://offleashphotos.com/. I went ahead and removed the float: left attribute, and you're right, it does center the footer background (text seems off center, but I can play with that), but I'm still having the problem where my footer background jumps up to my content area (bottomPods) in FireFox, but it stays in IE (and on the left with IE still). Any idea why? At first I thought a missing <div> but now my eyes are going crossed trying to pinpoint the issue.

    As for the .container/ box model, that makes sense, but how do you factor in the margin if your margin is set to "auto?" I tried increasing the width on .footer to account for the margins, padding and such where I do have a value, but then it was not centered.
    Last edited by AChicken9; 02-01-2011 at 10:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •