Floating Graphics

For a general discussion of graphics go to the Image Tags section.

Introduction

Version 2.0 HTML is somewhat limited when it comes to integrating text and graphics. For example, this line of text does not fill the space next to the picture, it wraps onto subsequent lines below the picture instead. Netscape introduced the idea of graphics that "float" alongside other page elements. You can choose to have a graphic float to either the left or right. Floating is cumulative; graphics will stack up several layers deep. This may lead to undesirable results. It is often necessary to terminate the floating property with the clear tag discussed below. For compatibility it is best to use floating graphics sparingly. [3.2]

Float Left

This is an example of a graphic floating to the left. To use this property simply add the left alignment modifier (\) to the image tag: {=\picture Flower Picture=}. Text, lists, tables, and other elements will move up to fill the empty space next to the graphic. Alternate text is handled as for non-floating graphics.

Float Right

This is an example of a graphic floating to the right. To use this property simply add the right alignment modifier (/) to the image tag: {=/picture Flower Picture=}. Text, lists, tables, and other elements will move up to fill the empty space next to the graphic. Alternate text is handled as for non-floating graphics.

Vertical Centering

This picture is centered vertically. To use this property simply add the center alignment modifier ($) to the image tag: {=$picture Flower Picture=}. The graphic is not truly floating and therefore does not need to be followed by a clear tag.

Clear Tag

The clear tag ({C}) is used to terminate the floating property. You must use the clear tag to avoid unwanted formatting problems. The use of the clear tag is illustrated in the following examples.

Examples

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.{C}

A list of items:

• Item 1
• Item 2
• Item 3{C}
  

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.{C}

This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. This is a long paragraph of text that should spill over into the space around the pictures. {C}