Wrap Text Around a Graphic

Issue

In many cases you will want to present a small graphic but, to keep the presentation "tight", you want the text flowing around it.

Example

Here is a simple example of text flowing around a graphic. This is used to make the presentation compact or to present a description of the graphic side-by-side so it is easy for the eye to move between the two.

Once the text is below the graphic it resumes normal formatting.

Solution

Markup Framework

Steps to flow or wrap text around a graphic are:

1. Copy the framework below and past into the page at the spot where the graphic is to be placed.

   <<HTML(<div style="float: left; padding: 0px; margin-bottom: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px;">)>>
   attachment:file.png
   <<HTML(</div>)>>

2. Replace file.png with the actual name of the attached graphic.

3. Replace the 0px with any margin or padding required.

Additional Formating

Stop the Wrapping

In some cases the text you want to wrap is shorter that the grahpic. This will lead to the next element started as part of the flow arround the graphic. To stop the wrapping process put the markup below after the last element you want to wrap.

<<HTML( <br clear="all"> )>>