The image in this example has align="left" and hspace="5". As you can see, there's a nice gap between the text and the image. The text aligns with the top of the image and flows around it. Floating images that don't specify hspace look much like this in browsers other than Netscape 6.

The image in this example has align="left" and hspace="0". The text runs right up against the image. This is the default layout for align="left" in Netscape 6. Most of us have relied on the default hspace applied by other browsers, so a lot of web pages will have floating images that look like this when you look at older pages with Netscape 6.

This example shows align="right" and hspace="5". The text is left-justified and flows around the image. Once the text reaches the bottom of the image, it again extends to the right margin.

This example is just like the one before it, except that the image and text are inside a <p> tag that specifies align="right". The text snuggles up against the image with jagged edges on the left rather than the right.

The image doesn't have to be the first thing inside the paragraph. Here, I've put the image right after this sentence. The image moves down to the far left of the next line, and the paragraph continues on the same line and then flows around the image. Once the text reaches the bottom of the image, it again extends to the left margin.

This is much like the previous example except that the image includes vspace="10" and hspace="10" to move the text a little further away from the image. vspace and hspace essentially add to the size of the image, and you can often improve the looks of your pages by choosing good values for them.

You can have both a left-aligned image and a right-aligned image. Here I've placed both <img> tags before any of the text in the paragraph, and I've made the right-aligned one shorter than the left-aligned one.

Here I've place the <img> tag for the left-aligned image before any of the text, but I've moved the other <img> tag down after some of the text. Floating images provide a lot of flexibility.

This is some text beside a floating image.
<br clear="left"> moves the following text down here. <br clear="all"> would do the same thing.

Here is some text between two floating images.
<br clear="right"> moves the following text down to here.
<br clear="left"> moves the following text down to here.

Here is some text between two floating images.
<br clear="right"> moves the following text down to here.
This example is just like the one before it, except that I've substituted a transparent image for the right-aligned image. This is one of the tricks you can use to get unusual layouts on your pages.

My Heading

The <h2> tag has align="center" and the <img> tag that's included inside the heading has align="left". Notice that the paragraph that follows the <h2> tag floats around the image. Also notice that the heading is centered within the space remaining beside the image rather than being centered in the browser window.

My Heading

Here I've added a <br> tag before "My Heading" inside the <h2> tag, and I've also added <br clear="all"> after "My Heading".

My Heading

Here I've got both a left-aligned image and a right-aligned image inside the <h2> tag. The heading is now centered in the table.

My Heading

Here I've substituted a transparent image for the right-aligned one. This is a technique you can use to center the heading.