Wrap text around images

How are folks wrapping text around images in a way that works across different email readers?  Simple align="left" or a more rigid multi-cell tables?

BThies BThies, 5 years ago

Table aligned with a space between the image and text like this:

<p>Copy above the image<p>
<table width="115" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td width="15"></td>
<td width="100"><img src="yourimage.jpg" height="100" width="100" border="0" style="display:block;"/></td>
</tr>
</table>
<p>Copy wrapping the image</p>

Brian Thies
Professional Email Developer
Thies Publishing
lavagraphics lavagraphics, 5 years ago

A real textwrap solution that works in outlook 2007 (only works on colored backgrounds, no image backgrounds):

css:
.thumb{border-right-color: #FFFFFF; border-right-width: 15px; border-right-style: solid; width: 150px; display: block;}

html:
<td valign="top" id="bugfix">
    <img src="<$imagesrc link='true'$>" width="150" hspace="15" class="thumb" alt="" align="left" />
    <$description default='vul hier de tekst in'$>
</td>

align-left: let the text wrap around the image
hspace: outlook 2007 seems to like this
border-right in css: supports almost all other clients

Hope this will help Cheers


Act Smart & Look Great
BThies BThies, 5 years ago

Keep in mind when using hspace that your image will never sit flush with the left edge of the text that wraps below.  You'll end up with the same space on the left & right of the image causing an unsightly gap.


Brian Thies
Professional Email Developer
Thies Publishing
g00fy, 5 years ago

Any solution to wrap text around image with background image? It works without if statement for Outlook..

<table cellpadding="0" cellspacing="0" border="0" width="673">
        <tr>
          <td width="673" height="550" background="http://img832.imageshack.us/img832/8786/36918038.jpg" valign="top">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:550px; width:673px;top:0;left:0;border:0;z-index:1;' src="http://img832.imageshack.us/img832/8786/36918038.jpg"/>
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:relative; height:550px; width:673px;top:0px;left:0px;border:0;z-index:2;'>
            <![endif]-->
              <table cellpadding="0" cellspacing="0" border="0" valign="top" width="365" align="center">
                <tr>
                  <td style="color:#000; font-family: Arial; font-size:12px; line-height:17px;">

                    <img src="http://img155.imageshack.us/img155/4387/unled1won.jpg" align="left" style="margin:0 15px 0 0;" />Farther along we came upon a group of three women and two children in the road, busy clearing out a labourer's cottage. They had got hold of a little hand truck, and were piling it up with unclean-Fabeyond the range of the Heat-Ray there, and had it not been for the silent desertion of some of the houses, the stirring movement of packing in others, and the knot of soldiers standing on the bridge over the railway and staring down the line towards Woking, the day would have seemed very like any other Sunday. 
                   
                  </td>
                </tr>
              </table>
            <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->
          </td>
        </tr>
      </table>

BThies BThies, 5 years ago

Hi g00fy,

Couple things:
1.) The Outlook 2007/2010 background image can't be tiled in a TD.  For that design I'd recommend recreating the blue areas & shadows using TD's along the sides for vertically flexibility.
2.) Give this code a shot for the text wrap:

CODE REMOVED

Brian Thies
Professional Email Developer
Thies Publishing
g00fy, 5 years ago

Hi BThies,

Thank you for the quick reply. But your code for wrapping is not working for me. The text is just below the image.

BThies BThies, 5 years ago

Unless I haven't had enough coffee this morning, this appears to be a limitation of the background image solution for OL07/10.

When trying to edit in Outlook, the text wrap options for the table are no longer click-able.

I imagine the embedding of the objects within the VML shape has limited their functionality.

Rather than using a background image for that area, I'd recommend using tables & cell background colors to recreate the sides.  It'll display the same and appear if images are disabled (plus no worry of size limitations).


Brian Thies
Professional Email Developer
Thies Publishing
g00fy, 5 years ago

Have just figured it out and then read your post. :)

Anyway - thank you!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098