Grow your CSS skills. Land your dream job.

Footer problem (footer too low on page)

  • # December 7, 2009 at 6:01 pm

    Hi,

    I’m having some problems with a sticky footer. i know there are several posts about footer problems, but I’m having kinda different problem. The footer is pushed down the page and there’s always a scroll bar even when there is almost no content on the page. I just want to have a margin of x pixels from the content to the footer if everything fits within the window.
    I know that most people have problems pushing the footer down without a blank white space beneath it, but my problem is that the footer is pushed too far and you always have to scroll no matter what.
    Does anybody know what’s wrong with my code. Appreciate any help. Thanks!

    You can have a look here: http://www.orientouch-e.com/test/

    Here is part of my CSS:

    Code:
    * { margin: 0; padding:0; }

    /* Main ————————————————————- */
    html, body {
    font-family: “Lucida Sans”, Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    }

    /* Header ————————————————————- */
    #header {
    background-color: #efefef;
    color: #f0f0f0;
    margin: 0;
    margin-top: -30px; /* 0 original */
    height: 175px;
    border-bottom: 6px;
    border-bottom-style: solid;
    border-bottom-color: #e31837;
    }
    #bar {
    position: relative;
    width: 100%;
    height: 30px; /* 40 original */
    background-image: url(img/master/headerBlack.gif);
    background-repeat: repeat-x;
    }

    h1 {
    width: 314px;
    margin-top: 40px; /* 28 original */
    float: left;
    }

    /* Footer ————————————————————- */
    #circlesContainer {
    right: 0;
    margin: 0;
    padding: 0;
    top: -47px;
    position: absolute;
    }

    #circles {
    position: absolute;
    padding: 0;
    margin: 0;
    right: 0;
    }

    .push {
    height: 47px;
    }

    #mainContent {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -47px;
    padding-bottom: 47px;
    }

    #footer {
    position: absolute;
    background: #f1f1f1;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: #e4e4e4;
    bottom: 0;
    width: 100%;
    height: 47px;
    line-height: 47px;
    visibility: visible;
    }

    #footerText {
    width: 940px;
    margin: 0 auto;
    font-size: 11px;
    color: #a5a5a5;
    padding: 0;
    position: relative;
    }

    p#footerCopyright {
    font-size: 13px;
    color: #a5a5a5;
    line-height: 3.5em;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    }

    p#footerCredit {
    font-size: 13px;
    color: #a5a5a5;
    line-height: 3.5em;
    right: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    }

    #footerImage {
    right: 0;
    line-height: 3.3em;
    }

    And the html:

    Code:
    < ?xml version="1.0" encoding="utf-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Contact

    Office

    Geldersekade 102B
    1012 BM Amsterdam, The Netherlands

    How to find us

    Telephone

    Telephone +31 (0) 20 – 6240194
    Fax +31 (0) 20 – 4286406

    Email

    General inquiries info@orientouch-e.com



    # December 8, 2009 at 2:51 am

    If I’m not mistaken, your problem is here:

    Code:
    #mainContent {
    height:auto !important;
    margin:0 auto -47px;
    min-height:100%;
    padding-bottom:47px;
    position:relative;
    }

    Try changing your margin to:

    Code:
    margin:-47px auto 0;

    I will also note this HTML code is taking up a lot of space:

    Code:

    # December 8, 2009 at 6:11 am

    Hi AshtonSanders,

    Thanks for your input.
    I tried changing the margin but it doesn’t work. The 3 circles in the footer are overlapping my content when the window is too small.
    The push class in the HTML is to give the footer an x margin to the content so there’s a bit of white space. In this case 47px; But if you know another way to do that I’d like to know how.

    # December 8, 2009 at 11:24 am

    Try this:

    http://ryanfait.com/resources/footer-st … m-of-page/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".