Allowing my footer to be aligned to the bottom.

Discussion in 'CSS' started by tewage, Feb 27, 2009.

  1. #1
    #footer{
    width: 1024px;
    margin: auto;
    overflow: visible;
    height: 262px;
    background: url(images/sg_01.gif) no-repeat bottom;
    position: relative;
    bottom: 0px;
    left: 0px;
    clear: both;
    }

    Honest, I couldn't figure it out and I just started adding on and taking off.
    What I want is my footer to be at the bottom of the page, no gaps.

    All I really want is my image at the bottom of the page, it could be from the background or div....

    I tried position: relative; but it made the content stop and took over the portion of the page.

    If you have any variations of this let me know. I guess I need to broaden my skills, because I am clueless.
     
    tewage, Feb 27, 2009 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    Your footer div should be inside the container and the stated width should be the same as the container.

    I personally never use:
    overflow: visible;
    position: relative;

    And what do you think you are doing with this statement? The part in red
    background: url(images/sg_01.gif) no-repeat bottom;

    Got a link to the page in question? I don't think you have enough posts for a live link but you can still post the url for us to look at.
     
    Colbyt, Feb 27, 2009 IP
  3. tewage

    tewage Active Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #3
    I will send a PM. The link is private. I was messing around with the css and looked for any possible way to better the look.
     
    tewage, Feb 27, 2009 IP
  4. tewage

    tewage Active Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #4
    #footer{
    width: 100%;
    height: 262px;
    background: url(images/sg_01.gif) no-repeat;
    margin-bottom: 0px;
    }
     
    tewage, Feb 27, 2009 IP
  5. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #5
    padding-top 150px; added to the footer div declaration
     
    Colbyt, Feb 27, 2009 IP