small gap below footer problem

[aicos]

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

[AshtonSanders]

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!

[aicos]

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.

[AshtonSanders]

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)

[aicos]

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

[Author]

Posts