Question

So often, I we wind up doing something like this:

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

What we usually mean is, “make sure that any floated elements are included into block one”. Sof potentially, any background applied to “one” appears behind everything, floating or not.

I am looking for a cleaner way to do this. After all, the “clear” div is simply a style that we intend to apply to “one”. We could do:

.floating-two:after{
  clear:both;
}

But this is not correct either. Floating-two doesn’t know whether there might be other blocks following it before “one”‘s closure.

Has anyone developed a trick for this one?

Answer 1

You can use overflow: hidden on the outer div and it will stretch to the height needed to contain .floating-two. Example fiddled here: http://jsfiddle.net/neilheinrich/rBBMp/6/

.one {
  overflow: hidden;
}