« Welcome Guest Author Lance McCord | Main | Querying a MySQL database with PHP - Random Quotes »

Text Wrap

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:

flower2.jpg 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"

flower2.jpg 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:

flower2.jpg
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:

flower2.jpg

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.

Links

CSS Float Tutorial - by Max Design

Comments (11)

Sarah:

Is there a special spot in the style sheet to put the floatimage code?

Sarah - I think the safest spot to put the floatimgleft code is at the very end of your stylesheet.

Ted Author Profile Page:

Is there a way to hack MT so that it automatically adds (class="floatimgleft"), when you upload an image?

Sreddy:

Hi -- Is it possible to use the span class example when the text for the caption is a sentence or two long? I used the code suggested, and while the positioning works the caption displays on a single line and the body wraps around the width as determined by the caption. I want the caption text to be no wider than the image itself, and the body text to wrap around both the image and caption text. Thanks.

Hi Sreddy - I manually add break tags within the span class, where I want the line breaks to be.

Elise, thanks for posting this.

Although I don't have a movable type blog, I had forgotten the css code for this nice design feature and was pleased to find it here, so efficiently explained! Google served up the best result of the day when it sent me here.

Laura Childs

Thanks Laura, I'm glad you found it useful.

Jake:

Hey!
Thank you!
I just used this for my latest project.
http://dampflame.com/Tracey/article/site2/

Thanks a ton!

Hey there,

Thanks for posting this in a simple and easy to understand way! I've been looking "forever" for a way to wrap the text around my photos. I don't use MT either, but the developers/host of my platform have recently allowed users to mess with the CSS stylesheet. I was worried I'd really screw it up, but your simple code made it a breeze. I did a "test" post, and it worked out pretty well.

Thanks again.
-RY

CSS TEXT examples , Properties , Attribute -
http://css-lessons.ucoz.com/css-text-properties.htm

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)