Images with Text

Important Points:: <IMG SRC="..." ALIGN=...>; left, right, WIDTH, HEIGHT;

This page shows HTML features that allow images and text to be mixed in a flexible way, and also shows some of the things that can go wrong and that are to be avoided!

Setting the attribute ALIGN=left in the HTML <IMG ...> tag causes text to flow around the image. Polly Woodside

The layout of the text and the image will be automatically adjusted if the size of the browser's window is changed (try it). PollyWoodside

In a similar way, setting ALIGN=right will introduce an image on the right hand side of the page.
This can easily lead to over-crowded pages, especially on a narrow window, and , say, can be used to cause the flow of text to be terminated.
Similarly, will stop the flow around the left-aligned image. will break to beneath both left and right images, if any.

Align and BR

This text refers to the image on the right. It might be a caption of some kind closely associated with the image.

This text refers to the image on the left.

This text refers to the image on the right. A   was required to stop interference with the image immediately above it. If this text is long anough and the window is narrow enough the text will also wrap underneath the image in the left of the page.

Images Clashes

The incautious use of ALIGN can lead to some unfortunate effects. It is generally best to restrict yourself to at most one left image or at most one right image and just possibly one of each provided that they are thin.

If you have an image on the left and on the right without sufficient room for text between them, then the text may get overwritten or may overwrite the images - depending on the browser. Any way, the effect may not be pleasant if the text runs into, under or over the images; try page widths around 680 to 730 pixels.
If the page is narrowed, the two images and the text (above) may overlap each other - not good.

Proportional Images

If the page size is changed and the images remain of a fixed size, the images may get wildly out of proportion with it and the effect can be very ugly. The image WIDTH can be set to a fraction of the page width, e.g. 50% (right), in which case it occupies a fixed proportion of the page. The image must be of sufficiently high resolution to look good at the maximum page size; this one is not. Further, the font size will not change and so the proportions of text areas can still change - not always with pleasant results.

Tables

Another way to control image and text layout
	is by using TABLES
(I'm sick of the ship too but there are only two different images here so at least the page does load quickly.)		Although the effect may be too rigid, e.g. if you maximise the page, and scroll-bars will appear if you make it really narrow.

	One version of HotWired used a layout a little like this to introduce its stories.
		A (different) thumbnail picture for each story was placed on the left and the title and brief description were placed on the right.
	Some think that staggering the images and text in this way differentiates each item from its neighbours.
		Although others believe that it is distracting.

The effect can be produced by using a TABLE. The underlying pattern is three items per row but on the odd numbered rows the second item has COLSPAN=2 and on the even numbered rows the first item is empty.

	You can see that there is one image repeated four times here
		because the copies do not match at their edges but if they were 4 parts of one cut-out photograph
	that joined seamlessly, the text would appear to flow around an irregular image.

Again the effect is achieved with a suitable use of a TABLE. The attributes BORDER, CELLSPACING and CELLPADDING are set to zero. Gifs with transparent backgrounds can be used to enhance this effect.

If you make the browser window extremely narrow the text will take up several lines and the images will be pushed apart vertically. This can be prevented by using ... (no break), or by forcing a minimum window width, e.g. setting the table width, use of a stretched 1x1 transparent gif etc.

Another TABLE trick - an irregular image can be made up of quite a large number of sub-images with text distributed, apparently carelessly, around it.

The text is within tables within the table so as to get some spacing around it; cellspacing being set to zero at the top level to have the image parts touch.

Again, better if the image(s) have transparent backgrounds to round off the edges, and of course they have to match up correctly.

A fair bit of trial and error was required to make this work under N3. Will it work under N4 and MS Explorer?

On Edges

1.

If you have a number of images of different sizes

the effect of the unaligned edges

can create an untidy effect.

2.

	Aligning the right edges
	of the images (with a `TABLE`)
	can be less disturbing.

3.

	Another alternative is to align
on the centre line of the page
	which is strong visually.