Electronic Books

..

The Queen of England...

to which we apply this CSS
p {margin:0 0 10px 0;}
img {?¬‚ oat:left; margin:0 4px 4px 0;}
Each image should ?¬‚ oat next to its associated text down the page.
However, when there is not enough text to clear the bottom of a
?¬‚ oated image, as in paragraph two in Figure 4.17, the next image/
paragraph pair moves up next to the ?¬‚ oat also.
In this example, the layout displays correctly in the browser; the
third item has room to sit next to the previous ?¬‚ oated element, so it
does. Of course, this is not what we want visually. The ?¬? x here is to
add a non-?¬‚ oated element into the markup that has a clear property
applied to it to force the third item to start below the second. Here??™s
the markup with an extra div element and an associated style added

Here's a lovely picture of Dartmoor...

My sister lived in this delightful cottage ...

The Queen of England...

and then we just need to add a clearing class to the CSS
p {margin:0 0 10px 0;}
img {?¬‚ oat:left; margin:0 4px 4px 0;}
.clearthe?¬‚ oats {clear:both;}
With the additional markup and the clearing class in the CSS (which
can clear elements ?¬‚ oated both left and right), the page now displays
correctly (Figure 4.


Pages:
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161