|
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
(Continued from page 1) Now let's look at one more example of floats using the style-test-2.html file shown below. This example will demonstrate the use of the 'clear' property. The example consists of two div sections, each of which has two paragraphs. Each first paragraph has an image inserted into the middle of the content of the paragraph, and each image is floated to the left. The first section's second paragraph is normal, while the second section's second paragraph has had its 'clear' property set to 'both'. The 'clear' property can be: none, left, right, both, and inherit. A value of left means the top of this box (in this case, a paragraph) must be below any left-floating boxes. A value of right means that this box must be below any right-floating boxes. A value of both means that this box must be below any left- or right-floating boxes. style-test-2.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; }
img { border: 2px solid green; margin: 1em; }
</style>
</head>
<body>
<div style="width: 350px;">
<p>
Here is some more text that we can use in this example of how to use floats.
Here is an image!
<img src="avajavalogo.jpg" style="float: left;" />
Here is some more text that we can use in this example of how to use floats.
</p>
<p>
Here is some more text that we can use in this example of how to use floats.
Here is some more text that we can use in this example of how to use floats.
</p>
</div>
<hr/>
<h3>'clear' example:</h3>
<div style="width: 350px;">
<p>
Here is some more text that we can use in this example of how to use floats.
Here is an image!
<img src="avajavalogo.jpg" style="float: left;" />
Here is some more text that we can use in this example of how to use floats.
</p>
<p style="clear: both;">
Here is some more text that we can use in this example of how to use floats.
Here is some more text that we can use in this example of how to use floats.
</p>
</div>
</body>
</html>
The display of style-test-2.html in IE7 is shown below. Notice that in the first section, the text of both paragraphs wrap around the floating image. In the second section, notice that the second paragraph doesn't wrap around the image, since we set its clear property to 'both'. We could have also set its clear property to 'left' to have the same effect in this case, whereas 'right' would have resulted in the second paragraph behaving like the second paragraph of the first section, since the image floats to the left. 
Related Tutorials: |