Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
search engine submission service.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


search engine listing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 
Updated October 22, 2001

Beginner Tip:
Wrapping Text Around Images

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
April 2001
(Part 2)
Vol. 4, No. 8
 • Promotion Tip
 • Design Tip
 • Beginner Tip
  

Adding images to a Web site is relatively simple, but many novice webmasters have more trouble effectively integrating text and images on their pages. The addition of just a few HTML tags and attributes - ALIGN and BR - can give your pages a more legible, pleasing layout.

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:

  • Left: Image positioned at the left side of the browser window, with text to the right.

  • Right: Image positioned at the right side of the browser window, with text to the left.

  • Top: Text aligns with the top of the image.

  • Middle: Text aligns with the middle of the image.

  • Bottom: Text aligns with the bottom of the image.

  • AbsBottom: The bottom of the image is aligned with the bottom of the surrounding text.

  • Texttop: The image top is aligned with the top of the surrounding text.

  • Absmiddle: The middle of the image is aligned with the middle of the surrounding text.

  • Baseline: The bottom of the image is aligned with the baseline of the surrounding text.

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 orbiting EarthThe Space Shuttle orbits high above Earth before docking with the International Space Station.

The Space Shuttle orbiting EarthThe 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
A view of Earth 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>
  • The first <BR> places the text directly above the image. Since the CLEAR attribute isn't used, the next line of text will flow against the image's right margin.
  • The image is aligned left, so it displays on the browser's left margin while text flows to the right. The next two <BR> tags insert line breaks for readability. You could also use a paragraph tag.
  • The final <BR> tag, with CLEAR set to left, starts a new line under the image, at the left browser margin.

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

A View From Space A view of Earth 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!

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.

Take the time to experiment with several different combinations of tags and attributes when you design your page. A single attribute value can have a big effect on page layout. If you want to really be sure the page is displaying properly, give Browser Photo a try.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.