I didn’t think this up myself, but I just learned it, and it seems terrifically useful. I run into this problem regularly: I have a containing element (div usually) with a few floating elements inside of it. I like to use this technique when splitting an element in half – a left half and a right half. I’ll float the left half to the left, give it a width that’s a little less than half of the outer container, float the right half to the right with the same width.
“Great,” I think to myself. Let’s ctrl+s then refresh the browser to check this pig out. Then there’s the problem…
If you’ve done something along these lines you’ve seen this mess before:
YIKES! My belly is hanging out of the bottom of my shirt! The container doesn’t expand to contain the inner floated elements. Here’s the simple solution: float the container element. Why didn’t I think of that?
Here’s what the solution looks like:
Seems too easy? Check out the working demo here. Many thanks to Steve Smith for his post documenting the technique.
