<div>

<p>

<img src=”image.jpg” alt=””>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

</p>

</div>

5.22

This is the default behaviour for the above code. The inline element continues on from the block element and sits next o it, which is great; however, the text seems to continue from the bottom of the image, which isn’t the best use of the space available to us.

Now let’s add a left float to the image and see how it affects things. Notice how the text wraps tightly around the image where before it rendered on a new line? Well, by applying the float to the image, we can tightly wrap it up and allow the rest of the content to flow around it. Almost like the div is ‘floating’ in the general flow of the document, right? As you can see, all other content must wrap itself around it as the floated element refuses to move. Once again we can apply some margin and padding to give the image a bit more space to breathe, and now we have something a bit easier to read (Figure 5.23).