Sticky Footer Leaving a Gap Btwn it and the Content

HTML & CSS
1

Okay, I’m sure I screwed something up. I attached a screen shot of what it’s doing. I’m using the sticky footer code previously discussed/created, here’s my CSS:


body, html
{
	margin: 0;
	padding: 0;
	height: 100%;
}

#Wrap
{
	width: 100%;
	margin: -100px auto 0 auto; 
	min-height: 100%;
}

#Content
{
	margin: 0 auto;
	border-top: 110px solid #fff;
	
	background: #fff;
	width: 770px;
	padding-left: 15px;
	padding-right: 15px;
}

#Footer
{
	margin: auto;
	min-height: 100px;
	clear: both;
	
	width: 100%;
}

There is enough content for the page to have to scroll (for me anyways), and it’s not doing this on the other page I made where I also have to scroll (but not as much - I think the footer is actually the only thing hidden on that one). And I’ve been looking at the HTML, and it looks exactly the same as far as the divs go x.x

Assistance please? :injured:

Okay wait, I figured it out as I was typing this… so now I just want to know why it does it…

I set p{margin-bottom: 0;} and it makes that gap. If I put a BR tag right after the </p> it connects just fine… Isn’t the div what’s suppose to be connecting them? Not the elements inside?

2

It’s margin collapse again and the p margin pushes through its parent into the container below. When you put a break after the p the margin collapse is stopped because it hits the break first.

In your main content div you could set a 1px padding bottom to stop the margin collapse and allow the p elements to have margins.

Remember that if there is no content between an element and its parent/child then the margins will collapse through.

I usually apply a 1px top and bottom padding to content divs when I want to be sure that no margin pokes out.

3

Oh, okay. Thanks so much :slight_smile: