Text Around an Image

This example shows how to wrap text around an image.

The text starts above the image definition. This is a lot of text and more text and more and more and even more.

Here is some text near the middle of the flag


Old Glory. Here is some text near the bottom of the flag

The image has the following class applied to it. The margin puts 3 pixels of space above and below the flag and 5px between the image and text on the right.

.fleft {
float: left;
margin: 3px 5px 3px 0px;
}

Note the text starts before the image definition. If it starts after, the text will start at the side of the image. Note that I limited the <div> to a width of 350 px and put a lime border around it for instructional purposes only.

<div style="width: 350px; border: 1px lime solid">
The text starts above the image definition.
<img class="fleft" alt="United States flag" src="images/american-flag.jpg" width="200px" height="146px" /> 
This is a lot of text and more text and more and more and even more. <br />
<br />
Here is some text near the middle of the flag <br />
<br />
<br />
Old Glory. Here is some text near the bottom of the flag</div>