Grow your CSS skills. Land your dream job.

small gap below footer problem

  • # November 28, 2009 at 12:53 pm

    Hi

    I’m having some strangeness with a gap appearing under my footer element. Well its actually under the #page div. Theres no padding or margin causing the problem.

    http://bit.ly/7hQdrB

    Two strange things are happening:

    1) When I can remove the height property on the footer, the background vanishes
    2) If I incease the height, the gap for some reason closes. That sort of fixes it, but I need the height to change according to how many list items I have in there. I can’t even understand why changing the height on the *footer* affects the gap.

    Can anyone tell me whats going on here?

    Thanks

    # November 28, 2009 at 1:46 pm

    The problem is that the footer is inheriting margin from your column div.

    Remove the Margin-bottom from your #footer div

    Change your code from:

    Code:
    #footer div {
    float:left;
    margin-bottom:9px;
    width:226px;
    }

    To:

    Code:
    #footer div {
    float:left;
    width:226px;
    }

    Then, add padding to the bottom of your footer:

    Code:
    div#footer {
    padding-bottom:9px;
    }

    Viola!

    # November 29, 2009 at 9:50 am

    Hi

    Thanks for the reply. Yes, I see now that the bottom-margin on the footer’s containing div was poking through the bottom. I fixed that. I then took out the height on the footer. But then the background image (a white to gray gradient) vanished.

    I started poking around with the overflow property on the footer, and found that if I set it to hidden, the background-image showed up again. What was actually happening was the whole footer had collapsed and it’s contents was not holding it open, just falling through the bottom. Why would the overflow property affect that?

    Its working now at least, but it would be nice to know what is going on.

    # November 29, 2009 at 1:17 pm

    Hmm… the collapsing div (because all of it’s children are floated) is a common problem.

    Normally the fix is to
    a) Add an empty div at the bottom that is "clear: both" (and not floated) OR
    b) Remove the height and add Overflow: hidden.

    (It’s a little early for me, but I think that’s right… lol)

    # December 1, 2009 at 11:23 am

    Ah, ok. Well I know for next time now. Thanks for the help.

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

You must be logged in to reply to this topic.

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