• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Working with Graphics > Wrapping Text Around Images

Wrapping Text Around Images

Layout options in HTML include wrapping text around images. The following exercise demonstrates how to create a text wrap. You can use the same procedure to align images with other elements, such as other images.

Select and copy the text from Lesson_02_Graphics/Text/diving.txt.

This file contains the text you will wrap.

In travel_log.htm, paste the copied text to the right of the diver graphic. Select and left-align all the text.

The text appears in the default position, with the first line of the text starting at the baseline of the image.

Select the diver graphic and choose Left from the Align drop-down menu in the property inspector.

The image is aligned left. The text on the right wraps to the bottom of the diver graphic and then returns to the left margin of the window. By changing the Align attribute, you can wrap multiple lines of text around the image. When you choose Left or Right from the Align menu, Dreamweaver places an image-anchor symbol at the point where the image was inserted. If necessary, you can move this anchor to a new location. The anchor needs to be at the beginning of the text for the text wrap to work properly. This symbol indicates where the HTML tag for the image is in relation to the text. If you don't see the symbol, choose View > Visual Aids > Invisible Elements. A check next to this command indicates that the option is selected. The symbol will not be visible in the browser.


The Align menu contains several options for images, including Top and Text Top. The list is confusing, but remember that text can wrap only on the left or the right side of an image, so the only options you can choose are Left and Right. The other options are for placement of a single line of text next to a graphic.

Save the file and preview it in the browser.

Keep in mind that whenever you select an alignment option other than Browser Default, you are applying an alignment to an image. When this happens, the image is offset slightly from the original position. You cannot control or get rid of this offset. The amount of offset varies from browser to browser but usually is only a couple of pixels and not noticeable. The offset may be a problem, however, if you are trying to align images in tables. In that case, you need to use other methods to control the placement of your images.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint