Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
the clearfix hack
Here is a weird, bad thing that can sometimes happen when using floats:
Boo. There is a way to fix this, but it's ugly. It's called the clearfix hack.
Let's try adding this new CSS:
Now let's see what happens:
This works for modern browsers. If you want to support IE6 you will want to add the following:
There are exotic browsers that may require extra attention. The world of clearfixing is pretty scary, but this simple solution will work for the vast majority of browsers today.