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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    footer moves relative to content in CSS

    Hello Everyone,

    I am new to CSS and understand a few basic things about the positioning side of a stylesheet, but I have a problem. I have a footer, and a content box. But since my footer is fixed, when the content box grows longer with text, it overlaps the footer. How can I tell the footer to move down whilst keeping a small gap between it and the content box?

    Thanks for any help you can give, and if its needed, here is my info;

    #content {
    z-index: 1;
    position: absolute;
    left: 380px;
    top: 290px;
    background-color: #cc3300;
    width: 435px;
    height: 200px;
    padding: 30px;
    color: white;
    }

    #footer {
    z-index: 1;
    position: absolute;
    left: 180px;
    top: 565px;
    background-color: #0099CC;
    width: 900px;
    padding: 10px;
    color: white;
    }

  • #2
    Senior Coder Len Whistler's Avatar
    Join Date
    Jul 2002
    Location
    Vancouver, BC Canada
    Posts
    1,323
    Thanks
    26
    Thanked 100 Times in 100 Posts
    You should make all your divisions "relative" then they will push each other down with the content. margin-left and right set to auto will center the division.

    PHP Code:
    #footer {
    z-index1;
    positionrelative;
    margin-leftauto;
    margin-rightauto;
    background-color#0099CC;
    width900px;
    padding10px;
    colorwhite;

    Leonard Whistler

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Most likely you need to get rid of the absolute positioning of the footer. Since you didn't post your html, I can't say if you have any nesting issues, but this should work:

    HTML:

    Code:
    <div id="wrap">
       <div id="content">Blah</div>
    
       <div id="footer">Blah</div>
    </div>
    CSS:

    Code:
    #wrap {
    background:#ffffff;
    color:#404040;
    width:900px;
    margin: 0px auto; /*centers the content in the browser window*/
    padding:0;
    text-align: left;
    }
    #content {
    margin:290px 0 0 380px;
    padding:10px;
    background-color: #cc3300;
    width: 435px;
    color:white;
    }
    #footer {
    clear:both;
    margin:0 auto 0 180px;
    background-color: #0099CC;
    width: 900px; /* or 100%*/
    padding: 10px;
    color: white;
    }
    You can play around with the margins until you get it right, but the clear:both is key to keeping the footer div below the container div.

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys, problem sorted. Great advice.


  •  

    Posting Permissions

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