Treehouse: Grow your CSS skills. Land your dream job.

Space from sticky footer?

  • # April 16, 2012 at 5:06 pm

    I’m using sticky footer in my design and for some reason there is a big space from my content to the footer. What might the problem be? I went over my css for sticky footer and it matches everything. I made sure to check if it was a problem with padding or margin and nothing wrong there.

    # April 16, 2012 at 5:12 pm

    I actually have the same problem on the website I am currently working on, here. I found that if I take away the added margin on one of the objects, it puts everything back to normal in my own browser, but someone with Opera piped up and said that my footer was covering some of my content. So, I believe you did everything right. It is just that some browsers act differently. Thus far, I have just dealt with it.

    # April 16, 2012 at 11:59 pm

    Do you know the concept of collapsing margins?

    # April 17, 2012 at 9:23 am

    no not really? here is a pic of what it looks like Image

    # April 17, 2012 at 10:24 am

    @johnjf A link to your site would help, we can’t help out much with just a screenshot

    @mwdewitt your markup is probably missing some closing tags — your

    and MAIN-COL are part of the

    , I’m not sure if that’s what you intended…..

    You can get rid of the spacing by changing margin-top:-250px; to top:-250px; though, since it’s positioned relative. Then there will be some spacing at the bottom but I think that’s because of the first issue(s) I mentioned.

    # April 17, 2012 at 12:25 pm

    my site here’s the link

    # April 17, 2012 at 12:59 pm

    It’s because of the .end_footer_ad. It isn’t displayed but it takes some space. Just the space you meant. Not sure why you need this Google advertisement on your website if you’re a designer yourself.

    By the way, why use a sticky footer this way? And what do you mean with sticky? If you want a sticky footer try this:

    .sticky_footer {
    position: fixed;
    width: 100%;
    bottom: 0;

    # April 17, 2012 at 1:10 pm

    this might be just me, but I like whitespace at the bottom of pages

    # April 17, 2012 at 1:19 pm

    hey right on @Vermaas. It was that stupid google adsense plugin I forgot to remove. I was doing a test with it couple weeks ago and forgot to remove it. Once I turned that off and removed the plugin, it worked like a charm.

    Thanks everyone for the help :D

    # April 17, 2012 at 1:29 pm

    @jognjf: nice :)!

    # April 22, 2012 at 3:56 am

    I’m having the same issue.
    There’s a large space between the end of my content and the footer.
    If I give the body a border I can see that the body is correctly limiting to the height of the window but the HTML is going past it. I can’t figure out why.


    # April 22, 2012 at 8:45 am

    Try to use float instead of using the block-level property of an HTML element. Well do not try this, do it! You’ll see that the styling of your HTML is a lot easier with the use of float on the HTML elements.

    Because you don’t use float, you’ve got this issue. Do a float (like: float: left;) on the main header, on the clearfix and the footer and try to style everything again.

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

You must be logged in to reply to this topic.