Insetting Images

TOC

In newspapers and magazines a popular design technique is to embed or insert images in the text columns in a way that makes the text flow around them. The image can be inset to the right or left, with text flowing around to the left or right of the image, respectively.

To inset an image, simply place the image tag on the line where it is to appear in the paragraph of text, and add the 'align="right"' or 'align="left"' attribute as appropriate.

Web page:Markup:

This document illustrates the simplest way to inset an image, without going into more sophisticated techniques utilizing advanced XHTML and CSS.
Its primary disadvantage is that it is not easy to caption the image, and the image must have it's "margins" built-in.

This document illustrates the simplest way to inset an image, without going into more sophisticated techniques utilizing advanced XHTML and CSS.
Its primary disadvantage is that it is not easy to caption the image, and the image must have it's "margins" built-in. 

<p><img align="right" src="i/usa-flag.gif" 
height="50" width="100" />
This document illustrates the simplest 
way to inset an image, without going into 
more sophisticated techniques utilizing 
advanced XHTML and CSS. 
Its primary disadvantage is that it is not 
possible to caption the image, and the 
image must have it's "margins" built-in.
</p>

<p>This document illustrates the simplest 
way to inset an image, without going into 
more sophisticated techniques utilizing 
advanced XHTML and CSS. 
<img align="left" src="i/usa-flag.gif" 
height="50" width="100" />
Its primary disadvantage is that it is not 
possible to caption the image, and the 
image must have it's "margins" built-in.
</p>

Giving the image dimensions in the source allows the browser to reserve space for the image while it downloads, preventing the annoying tendency for text to move around on the page as the visitor is reading.

In practice, this technique only works in HTML "Loose" or "Transitional" documents, not XHTML "Strict". In Strict, you must use CSS positioning and place the image tag within a <div> element. (See "CSS Positioning".)

<< Resizing and Thumbnailing Images | Index | Transparent GIFs >>