p element pushing footer set to clear:both away from floating divs?

I have a pretty basic layout, a maincontent area with a repeating background pattern so it always extends to the height of its content. Then I have a sidebar and content area, both floating left. Then I have a footer which is set to clear: both. Yet when the page renders, the footer is actually pushed away from content, so it looks like it's floating in space, as shown by attached image. When I remove margin from p elements, it's no longer pushed away. But the p is nested in the floating div so I don't understand how it can be pushing the footer div away? Thanks for any suggestions.


#wrapper {
position: relative;
left: 50%;
width: 960px;
margin-left: -480px;
}

#maincontent {
background: url(templatetile2.png) top left repeat-y;
overflow: auto;
}

#sidebar {
float: left;
width: 220px;
overflow: hidden;
}

#content {
float: left;
width: 620px;
background-color: #e6e7e7;
}

#footer {
clear: both;
background-color: red;
}


<div id="wrapper">
<div id="maincontent">
<div id="sidebar">
<div>
<a href="#">Unsubscribe</a>
</div>
</div>
<div id="content">
<h1>Headline</h1>
<p>
This element is pushing the content div away from the footer div due to the margin. Yet this p element is a child of the content div so I don't understand how it can be affecting the other div.
</p>

</div>
<div id="footer">
<div>
<p><a href="#">Click here</a></p>
</div>
</div>
</div

sounds like margin collapse ~ the gap is caused by the margin of the "<p>" tag as you've identified already

you can prevent this by adding "padding-bottom:1px;" to #content and padding-top:1px to #footer

im pretty sure there's another way to "fix" it but my memorys just blank.

i suspect if you view it in IE it'll display as expected albeit incorrectly.

Thanks that worked. But I don't understand why it worked for a number of reasons. 1) the p element is nested in the content div, so if the p element has bottom margin, shouldn't the container wrap around it (and hence its background contents)? 2) If p element has a default margin greater than 1px, how can a padding-bottom and padding-top of 1px, respectively solve this issue? Like I said, it works. But I don't understand logically how it does. Thanks for any response.

truthfully i don't understand it properly either

this is as in-depth discussion as you'll find :

http://www.howtocreate.co.uk/tutorials/css/margincollapsing