Floating Images

In the Saturday MidDay session, you learned how to vertically align an image relative to a line of text by inserting top, bottom, and middle attribute values in the IMG element. In addition to these attribute values, you can set two other ALIGN attribute values: left and right.

Although you might think that the purpose of these last two attribute values is to horizontally align an image at either the left or right margin, that's not strictly so. Rather, they also float the image to the left or right margin on the line where it is inserted. With a non-floating image, only the line of text on which an image is inserted is displayed to right or left of the image, with all other following text breaking beneath the image. With a floating image, however, following text lines and elements flow around the image, flowing around the right side of a left-aligned image and around the left side of a right-aligned image.

To start out, insert a non-floating image into the example file (see Figure 4.1):

<p><img src="safety.gif" width="225" height="150" alt="Safety
First">To further reduce the risk of infection from
Salmonella from eggs, you can cook your eggs until the whites
are no longer runny, which should kill any Salmonella
microorganisms that are present.

Figure 4.1: A non-floating image is inserted.

You will notice in Figure 4.1 that text by default is aligned with the bottom of an inline image, with text on following lines wrapping beneath the image. You will also notice that WIDTH, HEIGHT, and ALT attributes are included in the IMG element. As was stressed in the previous session, inclusion of the ALT attribute in IMG elements is required to create a valid HTML 4.01 document, while inclusion of WIDTH and HEIGHT attributes, to indicate the actual dimensions of the image, is recommended, since it allows a browser to allocate space for an image before it has finished being downloaded.

Floating an Image on the Left Margin

You can cause an image to float on the left margin of the page, with following text flowing around the right side of the image. To do this, insert an align="left" attribute in the IMG element (see Figure 4.2):

<p><img src="safety.gif" align="left" width="225" height="150"
alt="Safety First">To further reduce the risk of infection
from Salmonella from eggs, you can cook your eggs until the
whites are no longer runny, which should kill any Salmonella
microorganisms that are present.

Figure 4.2: The image is now floating, with following text flowing around the image.

Floating an Image on the Right Margin

You can cause an image to float on the right margin of the page, with following text flowing around the left side of the image. To do this, insert an IMG element with an align="right" attribute (see Figure 4.3):

<p><img src="quality.gif" align="right" width="225"
height="150" alt="Top Quality">Children, the elderly, and
individuals in ill-health are more vulnerable to developing
complications from Salmonella infection than is the case with
healthy adults.

Figure 4.3: An image floating on the right margin is inserted.

Flowing Text between Images

You can also flow text between two images by combining left-floating and right-floating images. Highlight and cut the IMG element you just inserted and paste it in following the first IMG element you inserted (see Figure 4.4):

<p><img src="safety.gif" align="left" width="225" height="150"
alt="Safety First"><img src="quality.gif" align="right"
width="225" height="150" alt="Safety First">To further reduce
the risk of infection from Salmonella from eggs, you can cook
your eggs until the whites are no longer runny, which should
kill any Salmonella microorganisms that are present.

Figure 4.4: Text is flowing between two floating images.

Staggering Floating Images

You can also stagger floating images. Highlight and cut the IMG element you just inserted and paste it in further down in the paragraph (see Figure 4.5):

<p><img src="safety.gif" align="left" width="225" height="150"
alt="Safety First"><img src="quality.gif" align="right"
width="225" height="150" alt="Safety First">To further reduce
the risk of infection from Salmonella from eggs, you can cook
your eggs until the whites are no longer runny, which should
kill any Salmonella microorganisms that are present. If
present at all, Salmonella is much more likely to be present
in the egg white, rather than the egg yolk (which has its own
protective membrane to further protect it), so there is
little reason to cook egg yolks until they are hard. <img
src="quality.gif" align="right" width="225" height="150"
alt="Safety First">As eggs age, however, yolk membranes
become weaker and egg whites become thinner, increasing the
risk that bacteria might find their way from the relatively
nutrient-poor egg white to the nutrient-rich egg yolk--to
reduce the risk of that happening, especially if you like
your eggs cooked over-easy, sunny-side up, or soft-boiled,
you should cook only with fresh eggs.

Figure 4.5: Text is flowing between staggered left-floating and right-floating images.

How far the images are staggered (or overlap each other) depends on where the second floating image is inserted. Also, floating images may overlap each other at one resolution (1024 Ч 768, for instance), but not at a lower resolution (800 Ч 600, for instance).

Adding Horizontal and Vertical Spacing

If you look at the two floating images shown in Figure 4.5, you will notice that there is no horizontal spacing separating the left-floating image from the text flowing around it. There is also not much vertical spacing above the right-floating image. The HSPACE (Horizontal Space) and VSPACE (Vertical Space) attributes are used in the IMG element to add spacing to the left and right or above and below an image. Use HSPACE and VSPACE attributes to add horizontal spacing to the left-floating image and vertical and horizontal spacing to the right-floating image (see Figure 4.6):

<p><img src="safety.gif" hspace="10" align="left" width="225"
height="150" alt="Safety First">To further reduce the risk of
infection from Salmonella from eggs, you can cook your eggs
until the whites are no longer runny, which should kill any
Salmonella microorganisms that are present. If present at
all, Salmonella is much more likely to be present in the egg
white, rather than the egg yolk (which has its own protective
membrane to further protect it), so there is little reason to
cook egg yolks until they are hard. <img src="quality.gif"
vspace="10" hspace="5" align="right" width="225" height="150"
alt="Safety First">As eggs age, however, yolk membranes
become weaker and egg whites become thinner, increasing the
risk that bacteria might find their way from the relatively
nutrient-poor egg white to the nutrient-rich egg yolk--to
reduce the risk of that happening, especially if you like
your eggs cooked over-easy, sunny-side up, or soft-boiled,
you should cook only with fresh eggs.

Figure 4.6: Horizontal spacing is added to the left-floating image and both vertical and horizontal spacing are added to the right-floating image.

Clearing Floating Images

You might not always want following text to continue to flow around a floating image. The BR element's CLEAR attribute can be used to cause following text or elements to clear a floating image. The CLEAR attribute takes left, right, and all as its values, with left clearing a left-floating image, right clearing a right-floating image, and all clearing any floating image. The following causes the text to clear the left-floating image (see Figure 4.7):

<p><img src="safety.gif" hspace="10" align="left" width="225"
height="150" alt="Safety First">To further reduce the risk of
infection from Salmonella from eggs, you can cook your eggs
until the whites are no longer runny, which should kill any
Salmonella microorganisms that are present. <br clear="left">If
present at all, Salmonella is much more likely to be present
in the egg white, rather than the egg yolk (which has its own
protective membrane to further protect it), so there is little
reason to cook egg yolks until they are hard.

Figure 4.7: Text following the BR element (with clear="left") moves down to clear the left-floating image.

The following causes the text to clear the right-floating image (see Figure 4.8):

<img src="quality.gif" vspace="10" hspace="5" align="right"
width="225" height="150" alt="Safety First">As eggs age, how-
ever, yolk membranes become weaker and egg whites become
thinner, increasing the risk that bacteria might find their
way from the relatively nutrient-poor egg white to the nutri-
ent-rich egg yolk--to reduce the risk of that happening,
especially if you like your eggs cooked over-easy, sunny-side
up, or soft-boiled, you should cook only with fresh eggs.
<br clear="right">Not properly refrigerating eggs or storing
them at an uneven or insufficient temperature can shorten the
shelf-life of eggs (Salmonella will not grow at temperatures
under 40-degrees Fahrenheit), although there is little danger
that even a spoiled egg will harbor Salmonella.</p>

Figure 4.8: Text following the BR element (with clear="right") moves down to clear the right-floating image.

Delete both of the BR elements you just inserted and insert another BR element, but with a clear="all" attribute to cause following text to clear both the left-floating and the right-floating image (see Figure 4.9):

<p><img src="safety.gif" hspace="10" align="left" width="225"
height="150" alt="Safety First">To further reduce the risk of
infection from Salmonella from eggs, you can cook your eggs
until the whites are no longer runny, which should kill any
Salmonella microorganisms that are present. <br clear="left">If
present at all, Salmonella is much more likely to be present
in the egg white, rather than the egg yolk (which has its own
protective membrane to further protect it), so there is
little reason to cook egg yolks until they are hard. <img
src="quality.gif" vspace="10" hspace="5" align="right"
width="225" height="150" alt="Safety First"><br clear="all">As
eggs age, however, yolk membranes become weaker and egg whites
become thinner, increasing the risk that bacteria might find
their way from the relatively nutrient-poor egg white to the
nutrient-rich egg yolk--to reduce the risk of that happening,
especially if you like your eggs cooked over-easy, sunny-side
up, or soft-boiled, you should cook only with fresh eggs. <br
clear="right">Not properly refrigerating eggs or storing them
at an uneven or insufficient temperature can shorten the
shelf-life of eggs (Salmonella will not grow at temperatures
under 40-degrees Fahrenheit), although there is little danger
that even a spoiled egg will harbor Salmonella.</p>

Figure 4.9: Text following the BR element (with clear="all") moves down to clear both the left-floating and the right-floating image.