Floats: Why And How To Clear Them

The image to the left was floated left and the float was not cleared. Notice that the image is not wrapped within the container. When an item is floated, it is removed from the normal flow in the sense that the container no longer sees the item as part of the container contents; therefore, the container collapses around the other non-floated content.

Just as in the example above, the image to the left was floated left; however, in this case the float was cleared:

<br style="clear:left;" />

Place the code to clear the float just before the closing </div> tag. When the float is cleared, the container wraps everything.