For quite a while I’ve added a separate div to clear floats. It is simple, and it works, but I have to add the additional markup. So I’d like to better understand how to add it to elements themselves. I kind of thought I had it, but it doesn’t work, so maybe someone can show me the error in my approach.
I have a page that looks something like this:
<div id="content">
<div class="box">
... some content
</div>
<div class="box">
... some content
</div>
</div>
<div id="footer">
... some content
</div>
The boxes both float left. I’m trying to clear them for the footer within in the footer css as in:
#footer {
clear: both;
margin-top: 20px;
}
This doesn’t achieve the desired result. The clear doesn’t seem to have any affect. The top margin on the footer is measured from the bottom of the Content, whose height doesn’t include the height of the floated divs it contains. If I put a <div class=“clear”></div> before the #footer, it works as expected.
If anyone can explain what I’m missing, I’d truly appreciate it.
That worked really well, and I appreciate now having a better understanding of the overflow property. It seems well suited to my application here as well.
But, for the sake of better understanding the clear property, I’m still not quite sure why my original code didn’t work. I had the following css defined for my footer:
The floats were not cleared by the #footer styles alone. When I put in another div just before the #footer that used the .clear class, the floats did get cleared.
The problem with what you are doing is that the margin on top of the footer doesn’t recognize the floated divs (as they are “out of the flow”).
The best solution is to make Content wrap around the floated items. One simple way to do this is to add overflow: hidden; to Content. In the cases where that’s not appropriate (say if you want something to hang out of Content) you can use the very popular “clearfix” method.
There is a huge amount of good material out there on the web about this, but FWIW, I tried a little summary of my own not so long ago, which may be of some use, and which has useful links to other (better) resources.
The extra clear div pushed up against the bottom of the floated divs, so there was effectively a barrier along the bottom of the floated divs. The footer was then able to rest againt this extra div and push away from it with its margin. Without that extra div, the margin of the footer slipped up under the floated divs.
Aha, the light goes on (finally). That makes sense. I’m really appreciative to you both for helping me get a grip on something that has been a bit of a mystery to me for a while.
Good idea. I use both the overflow and clearfix methods. Since this is a problem caused by CSS (float) it should be solved by CSS, rather than extra markup.
I see, I would have thought the clear would have established that border in the same way, and the margin would have pushed away from it. Regardless, I appreciate your explanation and now I’ll know for the future. I’ll be going with the overflow method here so I don’t need to add any extra markup.
BTW, I really liked your Page Affairs site as well!
As Ralph said floats are removed from the flow and the top margin on your footer will refer to the containing block and not a floated element above it. The margin slides under the float as if the float wasn’t there until it meets something solid like the edge of it’s containing block.
You added “clear” to the footer so the browser moved the footer to clear the floats but it typically does this by adding a top margin to the footer to make it clear the floats above. Therefore the footer already has a top margin which if the size of the floats above was 300px then effectively the footer would have a top margin of 300px.
When you now say margin-top:20px the browsers says don’t be silly it needs to be margin-top:300px to clear the floats. To test this out just give your footer a top margin greater than the height of the floats above it and you will see that it moves down (don’t test in IE because it has buggy behavior).
