Wrap Text Around Images in HTML

Wrap Text Around Images in HTML
There are two common methods for wrapping text around images in HTML: The image attribute method and the table alignment method. You can also use CSS to wrap text around images.

Image Attribute Method:
With image attribute method you can align the images depending on where you want those images to be placed in relation to text.

The code used to make the alignment was:

<img src="image.gif" width="80" height="80" align="right">

You could also use the following depending on where you want images placed in relation to text. Here are other alignment options:

align="left"
align="right"
align="top"
align="middle"
align="bottom"
align="baseline"
align="texttop"
align="absmiddle"
align="absbottom"

Table Alignment Method:
The table alignment method contains the image inside its own table at a set width that is the same as the image. The table as a whole is then set to align and give some cell padding for a defined border area. The example HTML code is below using cell padding of "5" and table alignment to the right:

<table width="80" border="0" align="right" cellpadding="5" cellspacing="0">
<tr>
<td align="center" valign="top">Caption Area<br>
<img src="images.gif" width="80" height="80"><br>
Caption Area</td>
</tr>
</table>

Using this method allows you to also add a caption top and/or bottom of the image if you like.

Using CSS to wrap text around an image:
With CSS you can use css float and padding to wrap text around images.

Example:
<img style="float: right; padding: 0px 0px 0px 3px;" src="image.gif" width="80" height="80">
For reference, padding values are read clockwise starting at the top of an image.
Likewise you can align the images depending on where you want those images to be placed.

Also, you can include justification to text to allow content to appear more like a newspaper or magazine layout.

<DIV style="text-align:justify; text-justify:distribute-all-lines;">

The appearance will vary among browser types and versions. For example, this works great for Windows Internet Explorer but leaves spaces in Windows Firefox browser.

Example: