Aligning text and objects around images

The ALIGN attribute of <IMG> tag helps in aligning other elements like text with respect to the image. It can take any of the following values:

• TOP: Aligns the image to the top of adjoining object.
• MIDDLE: Aligns the text baseline to the middle of the image.
• BOTTOM: Text baseline is aligned to the bottom of the image. This is the default value.
• LEFT and RIGHT: Image is aligned right of left with text wrapping around it.
• ABSMIDDLE, ABSBOTTOM and BASELINE Aligns the image with respect to the middle, bottom or baseline of the text.
• TEXTTOP: Aligns the image top with respect to the ascenders of the text. This attribute value is Netscape specific.
• CENTER: works same as align="middle".

However, a situation might arise when you would like to place only some text, say, a small description, on the left or right side of the image with the rest to flow after the image.

In our example, we want to align "What a fine idea!" to the left of the image with other sentences to be placed after the image.

If you use the following code, you shall not get the desired results.

<IMG SRC="bulb.gif" WIDTH="128" HEIGHT="220" ALT="Fine idea" 
ALIGN="RIGHT">
What a fine idea!<BR>The bulb in this ...

What a fine idea!
The bulb in this image represents an idea that I have cherished over the months but did not get time to implement.

You'll notice that the next line - "The Bulb in this ..." - also lies to the left of the image, while we wanted to place it below the image.

To force the next line to place below the image, we use CLEAR attribute of <BR> tag with "ALL" as value. Thus, placing <BR CLEAR="ALL"> right after the phrase will force the next line to start at a new line.

<IMG SRC="bulb.gif" WIDTH="128" HEIGHT="220" ALT="Fine idea" 
ALIGN="RIGHT"><
What a fine idea!<BR CLEAR="ALL">The bulb in this ...

What a fine idea!
The bulb in this image represents an idea that I have cherished over the months but did not get time to implement.