Aligning Your Images

I have seen many people ask how to wrap text around images. I have also witnessed many answers. These range from advice to use frames, use tables, use javascript, etc...

It is not a complicated process. Here is how it can easily be done. These two examples will show you how to put text beside your image, that begins at the very top of the image, and wraps around the picture.

<P> This is you basic paragraph element that tells the browser you are staring a new paragraph

Below is a basic tag to inset a graphic or picture:

<img align="" src="busy.jpg" width="250" height="170" border="0" alt="[image] busy people" />

You will notice that there isn't anything between the double quotations following the ALIGN attribute. There are a few different attribute descriptions that could go in here based upon your preferences.

absbottom
absmiddle
basline
bottom
left
middle
right
texttop
top

Try them all. Experiment! And to suggest the browser puts a certain amount of space between your text and images, you can include these attributes as well. HSPACE="" and VSPACE="". These attributes get placed inside the <IMG SRC> tag. What goes in the double quotations is a numeric value that represents an amount of pixels between your image and text.

| Back to Article Index |