HTML code to wrap text around image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linearly, meaning one thing directly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

So here’s how to wrap any text around a picture in HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src=”IMAGE URL” align=”left” />Your text goes here.

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

<img src=”IMAGE URL” align=”right” />Your text goes here.

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” />Your text goes here.

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the whitespace to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” />Your text goes here.

Fairly simple eh? There may be times when you have to copy and paste text into a field and can use these HTML tags to wrap the text around the image, i.e. filling out forms on MySpace, etc. Enjoy!