Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 262

FIGURE 4-31 The use of absolute positioning to overlap an image over the normal flow
The final property available to use for positioning elements is the float property. The float
property automatically moves an element to the left or right of surrounding content. This is
most commonly used to place images in line with text to force the text to wrap around the
image. Building on the sample above, you will move the img element in line with the text as
shown here:
<p style="width: 200px;margin-left: 200px;">
Lorem ipsum dolor sit amet,<img src="flowers.jpg"/> consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim<img src="orange.jpg"/> ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio...</p>
In this paragraph element, there are two images in line with the text. An image put in this
way will push the text out of the way to make room for itself. This is shown in Figure 4-32.
FIGURE 4-32 Images embedded in line with the text in normal flow