Making Images Float

Best javascript editor debugger Ajax website
↑

Main Page

Making Images Float

You can use the align attribute (with the left and right values only) to make images float along one side of your page, with text and other elements wrapping around the other.

To make images float:

1.	Type `<img src="image.jpg"` where image.jpg indicates the location of the image on the server.
2.	Either type `align="left"` to float the image on the left of the screen while the text flows to the right, or type `align="right"` to float the image on the right edge of the screen while the text flows on the left side of the image.
3.	Add other image attributes, as described in other parts of this chapter, if desired.
4.	Type the final `/>`.
5.	Create the elements that should flow next to the image.

Figure 5.22. When you align an image to the right, you are actually wrapping text to its left.

Figure 5.23. The image is aligned to the right and the text wraps around it.

Tips

Don't get confused about right and left. When you choose align="right", it's the image that goes to the right (while the text goes to the left). When you choose align="left", again, the image will be on the left side with the text flowing around the right side.

Figure 5.24. To make the image appear on the left with the text wrapped around the right side, use align="left".
The align attribute is deprecated. Nevertheless, I think it's a useful trick to have in your bag. If you're doing (X)HTML strict, use the CSS float property (see page 181) instead.
Why use the word align for floating images? I don't know. Personally, I'd prefer a float attribute, but it doesn't exist. For more details about what you can do with align, see page 100.

Figure 5.25. With the image floated on the left, the text wraps around on the right side (rather closely, but we'll fix that pretty soon).

To float images on both sides:

1.	Type `<img src="right.image" align="right">` where right.image indicates the location on the server of the image that should appear on the right side of the screen.
2.	Type the text that should flow around the first image.
3.	Type `<img src="left.image" align="left">` where left.image indicates the location on the server of the image that should appear on the left side of the screen.
4.	If desired, type `<p>` to begin a new paragraph, that will be aligned with the image placed in step 3.
5.	Type the text that should flow around the second image. Type `</p>` to complete that paragraph, if necessary.

Figure 5.26. The image always precedes the text that should flow around it.

Tips

The key is to place each image directly before the text it should "disrupt."
Each image will continue to push the text to one side until it either encounters a break (see page 98) or until there is no more text.

Figure 5.27. The first image is floated to the right and the text flows to its left. The next image appears after the last line of text in the preceding paragraph and pushes the following paragraph to the right.

[View full size image]

Best javascript editor debugger Ajax website
→

Making Images Float

Figure 5.22. When you align an image to the right, you are actually wrapping text to its left.

Figure 5.23. The image is aligned to the right and the text wraps around it.

Figure 5.24. To make the image appear on the left with the text wrapped around the right side, use align="left".

Figure 5.25. With the image floated on the left, the text wraps around on the right side (rather closely, but we'll fix that pretty soon).

Figure 5.26. The image always precedes the text that should flow around it.

Figure 5.27. The first image is floated to the right and the text flows to its left. The next image appears after the last line of text in the preceding paragraph and pushes the following paragraph to the right.