This may seem an odd title for this section, but until you've seen the devastation that can be wrought upon a web page by miscoding either the text or the graphics / image placement you haven't lived! The sight of text disappearing around the top of a rectangular image and then reappearing on the other side but at bottom of the image can cause perplexity, anger, hilarity or a strong desire for alcoholic refreshment (sometimes all four at once, which upsets the family!).

The principle cause of these problems is the misinterpretation of the placement descriptors when inserting an image file into the page. References to 'top', 'middle' and 'bottom' in the image instructions have nothing at all to do with where the image will end up, but are instructions for where text will anchor to the image!

This is why you can use <p align="left", "right" or "center"> to your heart's content in the text fields, once you slap an image file in the way they count for nought.

For instance, were I to (rashly) place an image in the centre of this page and attempt to write around it (some people do), there are several potential outcomes. Let us explore this further .......... and further ............. and further ............. and ............ further ...still.

Notice where the last word of the, albeit extended, sentence is? There is a lone 'still' out there! So let us try that again, but this time I get to be sneaky with the code and use the tag element <p align="left"></p> around the text and image.

Ok, here is my text start and any minute now I'll drop in the graphic (whummmmmmmmmph).. and neatly step around it, hee, hee. Neat huh!

Ok, what is different for the two lines of text? Well, first we have to understand how image files are placed into a page.

Without any placement instructions and as the first item in a paragraph the image is set at the far left of the page (as the first image, above, is). With text already in the paragraph the image sits as far left as it can to the text, as the second image does. You can change the position of the image by giving the instruction <p align="center"('right' or 'left')> , </p> before and after the image tags or <img align="right" src= etc.> within the image tags. As the next two show:

Unfortunately, the manipulation of text becomes more difficult now as it will also follow the 'align' instructions (As this shows!!)

At this point we have to introduce the <br> instruction. Using <br> 'breaks' the text flow around the image and forces the text to start a new line after the image. Another example follows (you knew it would):

Writing text after the image looks like this. <br>
Not too shabby, but what is happening to the combined image-text line?

Because it is all defined in the <p align="center"> tag, it just pushes everything across the line to accommodate it all. So we'll try the same thing with <div align="center" and </div> tags in place around text and image.

So here we go, minding our own business and out of nowhere this drops in!

That wasn't too bad, but is still not quite right. This time we will use the image placement tag <img align="left" src=etc. instructions from within the image tags. Unfortunately, you cannot use both 'img align=' and text 'align=' instructions inside the image instructions as you are not allowed two 'aligns' in the same set (spoilsports!), so we will control the text using the <p align tags.

So how about this for spreading the text about?

Back to the drawing board, so to speak. This time we will set <p align="left"> and </p> around the image, with text align="left" within the image attributes. (Note: text should now wrap around the image using this method.)

Like this
This time, at least the text looks as if it belongs somewhere around here and isn't fragmented to kingdom come!

The final move is to invoke <p align="center" text of your choice <img src=" location of your image" image details align="middle" alt=" alternative description of the image"> and some more text</p>, which brings us to:

This stunning demo and hope for the best!

For further reading and information about image and graphics manipulation, within a text page, look at HTML Goodies.com an enormous source of primers and invaluable source of skills training.