18).
STYLIN??™ WITH CSS - CHAPTER 4 118
FIGURE 4.18 With the clearing element
added, the layout displays
correctly.
This new ???cleared??? element added between the second and third
paragraphs is now positioned (invisibly, because it has no content
associated with it) beneath the second image. Because the third
image and paragraph follow this cleared element in the markup,
they are positioned below it, and the desired layout is achieved.
Clearing ?¬‚ oats is an important technique to master when you are
creating CSS layouts. The sidebar ???The Aslett Clearing Method???
discusses a useful technique that allows you to clear ?¬‚ oats using
only CSS and a single class in your markup. We will study ?¬‚ oats and
clearing further, but this is enough information to get you started
using ?¬‚ oats as the basis of many CSS page layouts. Now let??™s move
on to the position property.
The value of both on the clear
property means that the div clears
(sits below) elements ?¬‚ oated both
left and right. You could have used
the value left in this case, but by
using both, if you switch the ?¬‚ oat on
the images to right later, the clear
still works.
POSITIONING ELEMENTS 119
The Aslett Clearing Method
Named after its creator, Tony Aslett (www.csscreator.com), the Aslett Clearing Method forces a container such as a div to
enclose ?¬‚ oated content nested within it, which it would not normally do.
Pages:
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162