Updated March 23, 2005

Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:

Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet.

There are two main ways to do text wrap:

1. Using the align attribute. One way to achieve an image wrap is to include an align attribute to your image tag. Example: <img src="http://www.yoursite.com/image.jpg align="left" hspace="5" vspace="5"> Use the hspace and vspace attributes to add margin around the image. Note that using the align attribute will do the trick, but it isn't considered good XHTML.

Image wrap using align="left" hspace="5" vspace="5" Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

2. Adding a CSS class to your stylesheet. The proper way to do text wrap is to add a CSS class to your style sheet, and then include that class attribute in your image tag.

First add the following class to your stylesheet template:

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

Save and rebuild your stylesheet.

Then add the class attribute to the image tag of the image besides which you wish your text to wrap.

Example: <img src="http://www.yoursite.com/image.jpg class="floatimgleft">

If you float an image and you don't have enough text to wrap around the bottom of the image, add the following tag after the text you are wrapping:

<br style="clear: both;"/>

If you use the CSS stylesheet method, you can add captions to your images, while at the same time wrapping text.

Adding Captions with a Span Class (the easy way)

Instead of adding a class to the image attributes, you can wrap the image, and a caption, in a span class like so:

<span class="floatimgleft"><img alt="flower2.jpg" src="http://www.learningmovabletype.com/images/flower2.jpg" width="150" height="153" border="0"><br />Lily Pond</span>

This code produces the following result:

Lily Pond

Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit.

Adding Captions by Using Tables (the hard way)

Before the image tag, insert a div tag with the floatimgleft class:

<div class="floatimgleft">

Then add a table with two rows and with a width 2 pixels greater than the width of your image. In this case my image is 150 pixels wide, so the table width would be 152.

<table border="0" cellpadding="0" cellspacing="0" width="152"> 
  <tr> 
    <td width="100%" class="tableborder" style="border-bottom-style: none; border-bottom-width: medium"> <img alt="flower2.jpg" src="http://www.learningmovabletype.com/images/flower2.jpg" width="150" height="153" border="0"> </td> 
  </tr> 
  <tr> 
    <td width="100%" class="tableborder" style="border-top-style: none; border-top-width: medium"> <p align="center" class="imagetext">Lily Pond </td> 
  </tr> 
</table> 
</div>

The result should look like this:

Lily Pond

Links: CSS Float Tutorial - by Max Design