By default, a containing element with floated children will not extend to the bottom of the floats because the floats are removed from the flow of the page. To fix this, I typically put an element at the bottom of the containing element, after all floats, with the style “clear: both;”.
There are some other ways to achieve this, and the above method may not work in all browsers. See the links below.