How do I wrap text around an image?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the float property to wrap text around an image.
Tutorial created using: Windows XP


Page:    1 2 >

With CSSW, the 'float' property can be set on an image (or other boxes) so that text wraps around the image. The float property can be: left, right, none, and inherit. If the float property is set to left for an image, the floated image will sit at the left edge of the containing block, and content will flow to the right of the image. If the float property is set to right, the floated image will sit at the right side of the containing block, and content will flow to the left of the image.

This is illustrated in style-test-1.html, shown below. It consists of three paragraphs, each of which is given a blue border and a width of 300 pixels. Each paragraph consists of an image followed by some text. Each image is given a green border. The first image is not floated, the second image is floated to the left, and the third image is floated to the right.

style-test-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
p { border: 2px solid blue; width: 300px; }
img { border: 2px solid green; }
</style>
</head>
<body>
<p>
<img src="avajavalogo.jpg" />
This is an example where the image is not floated.
Here is some more text that we can use in this example of how to use floats.
And here is a little more, too.
</p>

<p>
<img src="avajavalogo.jpg" style="float: left;" />
This is an example where the image is floated to the left.
Here is some more text that we can use in this example of how to use floats.
And here is a little more, too. 
</p>

<p>
<img src="avajavalogo.jpg" style="float: right;" />
This is an example where the image is floated to the right.
Here is some more text that we can use in this example of how to use floats.
And here is a little more, too.
</p>

</body>
</html>

The style-test-1.html page is shown below in IE7. Notice how the second image hangs on the left side of the second paragraph and how the text wraps the image on the right side of the image. Notice how the third image hangs to the right and text wraps on its left.

float examples

(Continued on page 2)

Page:    1 2 >