HTML and CSS Reference
In-Depth Information
Notice that the bottom of the floated image appears outside its parent. The
parent does not fully expand to hold the floated image. This is caused by
what we discussed earlier: the floated element is out of the flow in relation
to other block elements, so all block elements will render as if the floated
element is not even there. This is not a CSS bug; it's in line with CSS
specifications. All browsers render the same in this example. It should be
pointed out that, in this example, adding a width to the container prevents
the issue from occurring in IE, so this would normally be something you
would have to resolve in Firefox, Opera, Safari, or Chrome.
SOLUTION 1: FLOAT THE CONTAINER
The easiest way to fix this problem is to float the containing parent element:
