The paragraph
(with a red border in the screenshot above) doesn??™t see the ?¬‚ oated
element as preceding it in the document ?¬‚ ow, so it also takes the
top left corner position of the parent; however, its content, the text,
wraps itself around the ?¬‚ oated image.
From here, it??™s a simple step to use ?¬‚ oat to form columns
(Figure 4.16).
p {?¬‚ oat:left; width:200px; margin:0;}
img {?¬‚ oat:left; margin:0 4px 4px 0;}
FIGURE 4.16 When the ?¬? xed width
paragraph is ?¬‚ oated next to the
?¬‚ oated image, it forms a column and
no longer wraps the image.
When you ?¬‚ oat both the image and the ???widthed??? paragraph like
this, the text-wrapping effect stops, and the text forms a column
next to the image. This is the principle of creating multi-column layouts
using ?¬‚ oats. As long as each element has width and is ?¬‚ oated,
and there is room for them to do so, they line up like columns.
(Images implicitly have width and don??™t need CSS dimensions when
?¬‚ oated to behave this way.) If you do this with three ?¬‚ oated, ?¬? xedwidth
divs, you get three containers into which you can put other
elements (and they too can be ?¬‚ oated if you want). You??™ll see all of
this in action in Chapter 5.
There are many more rules that govern
?¬‚ oats, and you can read about
them in Eric Meyer??™s book Cascading
Style Sheets 2.
Pages:
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159