HTML and CSS Reference
Figure 9-5. The border and background extend under the floated image
Fortunately, the solution is very simple. Just add the overflow property to the style rule that adds the
background and/or border, and set its value to hidden (the code is in the #location style rule in border_oat_x.
html). As Figure 9-6 shows, this neatly solves the problem.
Figure 9-6. The background and border now flow alongside the floated image with the text
Setting overflow to hidden works in all browsers in widespread use. However, if you need to support IE 6, you
need to set the Microsoft proprietary zoom property to 1 in the relevant style rule. Because zoom is not needed (or
supported) by other browsers, you can use an Internet Explorer conditional comment in the <head> of your page
like this (the selector needs to be the same as in your main style sheet):