HTML and CSS Reference
In-Depth Information
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
•
Use
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
Value
Description
left
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.
right
Same as
left
, but the block is floated to the right and other elements fill the space on the left.
none
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
.
Note
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).
