Flow Text Around Images

This page shows you the easiest way to flow text around an image, and shows you how to stop flowing the text around an image.

Using my wife's baby picture (ain't she cute), I've aligned this image to the right. This places the image on the right side of the available space and forces the text to flow around the image on the left side. The text continues like this until it clears the bottom of the image, at which point it will go back to the full width of the availabe space.

You can also align the picture to the left so the text will flow to the right side of the image. If you don't use an align right or left attribute, or the center command, the image by default aligns to the left, but your text will not flow around the image. The text would then align to the bottom of the image for one line then drop below the image. The code I used above was this:

<img src="images/babyali.jpg" align="right" width="100" height="103" hspace="15">

If you're really on the ball today, you might have noticed I used an hspace attribute in the above tag. This provides space around the horizontal plane of the picture, otherwise the text runs up to within a couple pixels of the image. You can also use a vspace command to establish a vertical plane of space around the image. The way it worked out, using the vspace attribute wasn't necessary in this case.

Here's my baby pic. My wife says I look like a little dickens, but I was a perfect little angel. You can use a clear attribute with a break tag if you want some text, but not all text, to flow around an image. This is useful, for example, if the text is a description of the image and you want no other text by it.
See how that works? I stopped the text from flowing around the image using the clear attribute, which forced the text to drop down below the image. The command to clear the text from flowing around an image is simply:

<br clear="left">

The clear attribute can have a value of left, right, or all. In this case the image was aligned left so I needed to clear left. If you use a left border background and the old trick of using a transparent gif to keep the text off the border pattern, using a clear left or clear all command would send the rest of the content way down yonder below the transparent gif. The remaining content would then be on the border area. Most likely, that's not good, he says.