Images - floats and displays

In the good old days when I started here (the practically pre-historic 2003) images on websites were simple enough, just upload your image, link to it with <img src="whatever">  and there it was.  The only other option I used was to align it left or right so that the text would flow around the image at its chosen point on the page.

Not any more.  Fast forward to the University style sheets (which, may I say are fantastic, making it easy to put together a professional looking page) and images cause the uninitiated problems.   Put the old image tag within a paragraph tag and the image will automatically go to the right, with a boarder and the text will flow around it.  In 90% of cases, this is exactly what you'd want the image to do.  Put the image outside a paragraph tag and it will appear on a line of its own.  This is usually not what is wanted.

For the record, what you now need, in xhtml, is a style containing a float and or a display command.  The purest way to do this is to add a class to your external css style sheet containing the relevant instructions:

img.floatright { float:right; }

then in your code <img class="floatright" src="whatever">

The lazy way is to put it all in the img tag: <img style="float: right" src="whatever">

For the record, if you just want an image to appear after your text (rather than aligned right or left), set "float" to none and use "display" instead

<img style="float: none; display:inline" src="whatever">