treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Footer Problem

  • Hello Guys!!

    I'm having a little problem with my page running a little lower than my footer. This actually happened all of the sudden cause it was good yesterday and I didn't change the code for it.

    BTW: I'm using WordPress

    http://img175.imageshack.us/img175/6407/footerij3.jpg

    here's the CSS
    /* Footer*/

    #footer {
    margin: 50px auto;
    width: 100%;
    height: 100px;
    float:left;
    position:absolute;
    background-image: url('images/footer_bg.png');
    background-repeat: repeat-x;
    background-color: #1b3244;
    border-top: dashed 2px #ffffff;
    padding:15px 0 15px 0;
    color:#ffffff;
    }


    #footer2 {
    margin:0 auto;
    width: 900px;
    }

    #ads {
    width: 440px;
    display: block;
    float: right;
    }

    #ads img {
    padding: 3px;
    background: #ffffff;
    }

    #contact {
    width: 400px;
    font-size: 12px;
    float: left;
    }


    And here's the HTML
    <div id=\"footer\">
    <div id=\"footer2\">

    <div id=\"ads\">
    <a href=\"http://www.infrasonico.com/#\"><img src=\"http://www.infrasonico.com/wp-content/themes/infrasonico/images/publi.jpg\" alt=\"Anunciarse en este espacio\" /></a>
    <a href=\"http://www.infrasonico.com/#\"><img src=\"http://www.infrasonico.com/wp-content/themes/infrasonico/images/publi.jpg\" alt=\"Anunciarse en este espacio\" /></a>
    <a href=\"http://www.infrasonico.com/#\"><img src=\"http://www.infrasonico.com/wp-content/themes/infrasonico/images/publi.jpg\" alt=\"Anunciarse en este espacio\" /></a>
    <a href=\"http://www.infrasonico.com/#\"><img src=\"http://www.infrasonico.com/wp-content/themes/infrasonico/images/publi.jpg\" alt=\"Anunciarse en este espacio\" /></a>
    </div>

    <div id=\"contact\">
    <p>Para más información sobre este espacio, envíenos un e-mail a ...O no nos mande un mail. Mejor agréguenos a MSN con el mail . Ay, no, mejor no, va a molestar todos los días. No, no, ¡qué pereza tener que hablarle! ...¡NOOOOOOO! Rayos, muy tarde. :D</p>
    </div>

    </div>
    </div>
  • Post a link to the site - it'll be much easier to diagnose that way.
  • Very important!!!! forgot about it, sorry :oops:

    I've edited the original post, thanks!!!
  • Are you viewing it in IE? Looks fine in firefox. You could try removing the bottom margin on #footer, or changing height:100px to min-height:100px.
  • Try changing " padding: 15px 0; " to " padding: 20px 0; " in your #footer
  • "bbodine1" said:
    Try changing " padding: 15px 0; " to " padding: 20px 0; " in your #footer

    Scratch that. Would be better to just remove your height:100px all together. Not sure how this will do in IE but I would think it will be fine. Can't test IE.
  • Actually I was using firefox, so... that's a little weird.

    But I used the min-height:100px and it did the trick!!!

    Thanks to all for the help!!!!
  • "box" said:
    Are you viewing it in IE? Looks fine in firefox. You could try removing the bottom margin on #footer, or changing height:100px to min-height:100px.
    I saw what you were talking about in Firefox Oscar. Minor but I would be the same way if I were you. Awesome site by the way. If only I could read Spanish.