HTML and CSS Reference
In this chapter, you'll learn how to do the following:
Float images to the left and right, and flow text around them
Prevent headings and other elements from moving up alongside floated elements
Examine the interaction of margins with floated elements
Add a caption to a floated image
float to add a sidebar to a page
How to Float an Element
You can float any element, unless its display property is set to none , or it uses absolute or fixed positioning
(see Chapter 11 ). he float property accepts the values listed in Table 7-1 .
Table 7-1. Values Accepted by the float Property
The element generates a block that is floated to the left inside its parent. Following elements move
up into the empty space on the right.
Same as left , but the block is floated to the right and other elements fill the space on the left.
The element is not floated. This is the default value.
Because float is not inherited, you can also use the inherit keyword to force inheritance from the parent
element. The main purpose of none is to override another style rule. For example, CSS3 media queries (see
Chapter 17 ) allow you to serve different styles depending on a device's features, such as screen width. For desktop
monitors, your styles will probably float images left or right. But on a mobile phone, you could set float to none ,
and use other styles to center the image.
■ The draft Css3 Box model module proposes adding top , bottom , start , and end as acceptable values for
the float property. However, at the time of this writing, browsers support only the values listed in Table 7-1 .
Using float to Flow Text Around Images
The old-school way of flowing text around an image was to add the align attribute in the <img> tag, and set
its value to left or right . It did the job, but no space was left between the image and the surrounding text. To
compensate, you needed to use the hspace attribute, but this adds the same amount on both sides of the image.
Similarly, the vspace attribute adds the same vertical space on the top and bottom of an image, destroying the
layout, as shown in Figure 7-2 (see align_attr.html in the ch07 folder).