Once you have added an image to your Web page, you might want to have the text flow next to the image, rather than align below it. There are two ways you can do it - CSS or HTML. I recommend using CSS, as it's more standards based.
Difficulty: Easy
Time Required: 5 minutes
Here's How:
- Add your image to your Web page. If you have questions about how to do this, read my how to: How to Add an Image to Your Web Page.
- Using CSS
Add the style attribute to your image tag:<img src="URL" alt="alternate text" width="width" height="height" style=" />
- You'll use the float style property to move your image to one side or the other. The tricky part is remembering that you're floating your image, not the text. So if you want to wrap the text on the left side of the image, you need to float that image to the right, and vice versa. So add the float property to your image:
<img src="URL" alt="alternate text" width="width" height="height" style="float:right; />
- If you want your text to wrap around the right of the image, float the image to the left:
<img src="URL" alt="alternate text" width="width" height="height" style="float:left; />
- Close the style property and upload your HTML to your Web server:
<img src="URL" alt="alternate text" width="width" height="height" style="float:right;" />
- Using HTML
Add the align attribute to your image tag:<img src="URL" alt="alternate text" width="width" height="height" align=" />
- To wrap text to the left, align the image to the right:
<img src="URL" alt="alternate text" width="width" height="height" align="right />
- To wrap text to the right, align the image to the left:
<img src="URL" alt="alternate text" width="width" height="height" align="left />
- Close the align attribute and upload your HTML to the Web server:
<img src="URL" alt="alternate text" width="width" height="height" align="right" />
