PageResource.com - Web Development Tutorials

Image Alignment and Wrapping Text

How to wrap text around an image
Note: These effects can now all be achieved using Cascading Style Sheets.

To allow text to wrap around an image, you just need to add one of these commands to the image tag:

align="left"
align="right"

So, the image tag would look like this:

<img src="next.jpg" align="left" />

Now just type in your text and it will wrap around the image, rather than jumping to the bottom of the image. Here is an example.

Hmmm....I think this image is in the way...<br />
<img src="http://www.pageresource.com/images/next.jpg" align="left" />
Hello, this text should wrap around<br />
this image like this.<br />
I'll just keep on writing and<br />
writing and writing and writing<br />
until I'm tired of writing....<br />

This will give you the following:

Hmmm....I think this image is in the way...
sample image with text wrapped around it Hello, this text should wrap around
this image like this.
I'll just keep on writing and
writing and writing and writing
until I'm tired of writing....

If you write across the entire screen, you won't need all those line breaks. I just used them to keep the example from being really long. If you take out the line breaks, the text will go the rest of the way across the screen before wrapping around. You can also do this with the align="right" command. The image will be on the right and your text will wrap around the left. Isn't this great?

Well then, let's move on to the next section: Using Image "alt" Commands.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy