The Mystery Of the CSS Float Property - CSS Essentials - page 28

If you view this page in IE6 or IE7, you won't see any problems. The left and
right columns are in place, and the footer is nicely tucked underneath. But in
Firefox, Opera, Safari, and Chrome, you'll see the footer jump up beside the
left column. This is caused by the float applied to the columns. This is the
correct behavior, even though it is a more problematic one. To resolve this
issue, we use the aforementioned clear property, applied to the footer:
#footer {
clear: both;
}