Using CSS to wrap text around images

You can use the float and margin properties to enable body copy to wrap around an
image. The method is similar to the pull quote example in the previous chapter, so we
won’t dwell too much on this. Suffice to say that images can be floated left or right, and
margins can be set around edges facing body copy in order to provide some whitespace.
For example, expanding on the previous example, you could add the following rules to
ensure that the surrounding body copy doesn’t hug the image:
.photo {
border-width: 8px 8px 20px 8px;
border-style: solid;
border-color: #ffffff;
float: right;
margin-left: 20px;
margin-bottom: 20px;
}

This results in the following effect shown in the following image.

 

See using-css-to-wrap-around-images.html, using-css-to-wrap-around-images.css,
and sunset.jpg in the chapter 4 folder for a working example of this page.