Position Images With ALIGN

The ALIGN attribute is an optional attribute to the IMG tag. It defines image placement relative to browser margins and text. ALIGN = "right" places the image on the right border of the browser window. ALIGN = "left" places it on the left border. Text flows around the images depending on their placement.

Note that ALIGN is deprecated (marked for deletion) in HTML 4.0, but it won't disappear anytime soon. Use it until you become proficient positioning your page elements with Cascading Style Sheets.

The code is simple: <IMG SRC="YourImageName" ALIGN="left">

Both LEFT and RIGHT control where the image displays in relation to the browser margin. The surrounding text wraps around it from top to bottom. Here's a list of possible values:

Play It Safe!

Browser support is spotty for Absbottom, Texttop, Absmiddle, and Baseline. LEFT and RIGHT are the safest options because you can reliably predict exactly how the text will wrap. The other attributes may place one line of text where you expect, but then drop the rest below the image.

For instance, when ALIGN = "middle," browsers only display one line of text next to the middle of the image. Any extra text drops down below the image and gives your layout a jerky, unstructured feel. Always consider browser display differences during the design process. Visitors will be using different size browser windows and screen resolutions. On your machine, the sentence that looks great next to an image may be broken in half on a visitor's monitor.

Here's an example. In the top image, ALIGN="right," while the bottom image has ALIGN="middle." See the differences in the text?

The Space Shuttle orbits high above Earth before docking with the International Space Station.

The Space Shuttle orbits high above Earth before docking with the International Space Station.

Test your page thoroughly to make sure that text is displaying exactly how you intended.

More Control With <BR>

For even more control over text placement, combine ALIGN with the <BR> tag's CLEAR attribute. Used alone, the <BR> tag tells the browser to resume text flow at the left margin of the next line of the browser or the right margin of a page element. When you include the CLEAR attribute, you can control whether text flows against the image or drops below it to begin on a completely new line.

This is particularly useful if you want to place captions on top of images, to the side, and below them. Possible values for CLEAR are: left, right, and all. The CLEAR attribute tells the browser to resume text flow at the next blank line at the specified margin.

Look at this example image from our Browser Photo page and note where the text is positioned:

A View From Space The International Space Station is one of the brightest objects in the night sky. It's easy to spot without any special equipment. Check out sighting opportunities in your area!

Here's the HTML code:

<b>A View From Space</b><BR>
<img src="earthFromSpace_no8.jpg" alt="A view of Earth from space." 
 align="left">
The International Space Station is one of the brightest objects in 
 the night sky. <BR><BR> It's easy to spot without any 
 special equipment.<BR clear="left">
<b>Check out <a href=" http://spaceflight.nasa.gov/realdata/sightings/
 SSapplications/Post/SightingData/sighting_index.html" 
 target="_blank">sighting opportunities</a> in your area!</b>

Here's how the same image and text looks if we remove all the <BR> tags:

Avoid confusion by using <BR CLEAR="all"> at the end of text you want associated with an image. That stops text that belongs in the next section from flowing up and around the image above it. Instead, text will begin on the next line where both margins are empty.