Contain Floats Without Adding Structure
Thursday, January 31st, 2008
Nothing about this post is new or unknown to many people much smarter than myself. I don’t usually post CSS solutions here because there are fantastic resources out there already. This CSS problem is simple – an outer div contains floats. The floats pop out the bottom of the div and this is shown best by putting a simple border on the div to show its got no height. This is exactly what’s meant to happen.
But if we’ve got a situation where we want floated content to stay wrapped within the div what do we do?
I’m posting this because nearly every time I see advice on this question the answer put forward is to add an extra div into your markup at the end of the initial enclosing div (after the floated content) and setting the CSS to clear that element. That’s simply clear: both;.
