Image Alignment

Left-aligned Images

You may sometimes want to place two or more images next to each other on the left with text flowing around it. This works fine if the images precede other text in the paragraph:

<p>
  <img ... align="left" />
  <img ... align="left" />
  Solomon, one of david's sons, had 500 wives
  and 500 porcupines.
</p>
<p>
  Without the Greeks we wouldn't have history.
  The Greeks invented three kinds of
  columns - Corinthian, Doric, and Ironic.
</p>

All browsers that I've tested with handle the above code just fine. But Netscape 4 has some serious bugs dealing with some similar situations. This next example is very similar to the above one, except that the images are placed somewhere within a paragraph instead of at the beginning of one.

<p>
  They also had myths.  A myth is a female moth.
  <img ... align="left" />
  <img ... align="left" />
  One myth says that the mother of Achilles
  dipped him in the River Stynx until he became
  intollerable.  Achilles appears in the Iliad,
  by Homer.  Homer also wrote the Oddity, in which
  Penelope was the last hardship that Ulysses
  endured on his journey.
</p>

In this example, I specified the smaller image followed by the larger one. IE 4 does a fine job of displaying this as I intended as you can see in this highly-compressed screen shot:

However, Netscape 4 actually places the images on top of each other:

The situation is even worse if I reverse the order of the two images:

<p>
  Homer was not written by Homer, but by another
  man of that name.
  <img ... align="left" />
  <img ... align="left" />
  Socrates was a famous Greek teacher who went
  around giving people advice.  They killed him.
  Socrates died from an overdose of wedlock.
  In the Olympic games, Greeks ran races, jumped,
  hurled the biscuits, and threw the java.
  The reward to the victor was a coral wreath.
  The government of Athens was democratic because
  people took the law into their own hands.  There
  were no wars in Greece as the mountains were so
  high that they couldn't climb over them to see
  what their neighbors were doing.
</p>

Once again, IE 4 displays this as intended:

Netscape 4 again placed one image on top of the other. But this time, the larger one is on top and you can't see the other one at all. Worse, the text is formatted in relation to the smaller one and is partly obscured by the larger image.

Here's a slightly different situation that also causes Netscape 4 to barf:

<p>
  <img ... align="left" />
  When they faught with the Persians,
  the Greeks were outnumbered because
  the Persians had more men.
</p>
<p>
  <img ... align="left" />
  Eventually, the Romans conquered the Geeks.
</p>
<br clear="left" />
<p>
  History calls people Romans because they
  never stayed in one place for very long.
</p>
<p>
  At Roman banquets the guests wore garlics
  in their hair.
</p>

Once again, IE 4 displays this as intended:

Netscape 4 placed the images correctly, but misjudged where the text should go after the clear="left":

The moral of the story: Be very careful when using multiple left-aligned images. Be sure to view the page in Netscape 4. Consider using tables to lay out the page if you need this type of formatting.