I'm trying to remove the black gap at the bottom of this website, and I can't for the life of me work out why it's appearing.

I've looked through it with Firebug, and I'm having no luck here at all finding the mysterious cause of the gap.

http://wornagain.myshopify.com/

Any ideas?

3 answers

danwellman 5600
3
points

Personally I think the black bit at the bottom looks good, it kind frames the page nicely, but to remove it, you can just pad out the #footerwrap div with:

padding:20px; which gets rid of it :)

Answered over 7 years ago by danwellman
  • Thanks, this has fixed the display issue, but I'm still unclear about where this padding has come from. Still it at least looks how it's supposed to now! Chris Adams over 7 years ago
  • Read the bit about margin collapse - elements with margins can stick the margin out of their wrapper if there's nothing to push against. often the culprit is way up in the document flow and not where you'd expect it to be. Tony Crockford over 7 years ago
1
point

it looks like a margin collapse issue.

something with a margin is pushing out the body.

you can see this by changing the padding on body to 1px.

read up about margin-collapse issues here: http://reference.sitepoint.com/css/collapsingmargins

I normally solve collapsing margin issues by setting vertical padding to 1px on container elements

not sure which element is the culprit here...

Answered over 7 years ago by Tony Crockford
0
points

http://complexspiral.com/publications/uncollapsing-margins/ explains more about how margins collapse and the problems they cause

Answered over 7 years ago by Tony Crockford