Small Business Resources

Image Placement and Size

Placing images and related text on web pages is one of the most common things you will do.  However, getting everything to line up right can be frustrating.   This tutorial describes the basics of how to do it easily without using CSS or Tables.

OK, let's get started. Open a blank web page, and insert an image. The default placement for all images is to the left of your page (or cell if you put it in a table cell).

<img src="images/cat.jpg">

To place the image to the right: <img src="images/cat.jpg"align="right">

To adjust the viewable size of the image from the default: <img src="images/cat.jpg" width="200" height="126">

Width and height are independent of each other, and you can adjust one, without changing the other:

Here we have adjusted the width only: <img src="images/cat.jpg" width="100" height="126">

Text Placement

Now we will add text to the image.

The default placement is at the bottom of the image. This is the default, and the bottom attribute isn't actually required. <img src="images/cat.jpg" align="bottom"> your text

your text

To place the text at different locations next to the image: <img src="images/cat.jpg" align="top">your text

your text

<img src="images/cat.jpg" align="middle">your text

your text

If you have too much text, it will wrap around the bottom of the image.   How do you prevent that? The trick is to not use the top, middle or bottom attributes!  Instead, use align="left" or align="right", even if your image is already placed where you want it.

<img src="images/cat.jpg" align="left">your text

your text your text your text your text

<img src="images/cat.jpg" align="right">your text

your text your text your text your text

What about other attributes? There are a number of others you can use as well (such as absbottom, baseline, etc) but they don't always work the same in different browsers.  For nearly all your pages, the ones presented here will be all you need.

Copyright © Dick Sowa 2003. All Rights Reserved

About the Author:
Dick Sowa is a retired Professional Engineer and senior manager with the Federal Govt, and is a Partner and Webmaster for  Digital Winners, which specializes in services for small businesses and online shopping.