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

May 14th, 2010, 07:12 PM
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">
<a href="#">Unsubscribe</a>
<div id="content">
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.

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

May 14th, 2010, 07:35 PM
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.

May 14th, 2010, 07:46 PM
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.

May 14th, 2010, 08:16 PM
truthfully i don't understand it properly either

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