• 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.

In invent_lens.html, place the insertion point at the beginning of the second paragraph. Insert ptarena_outlens.jpg.

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

Select the ptarena_outlens.jpg 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 ptarena_outlens.jpg graphic and then returns to the left margin of the window. By changing the Align attribute, 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. If the list is confusing to you, 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.

Give the ptarena_outlens.jpg image a border of 1 pixel. 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.

The amount of text that wraps around the image will depend on the size at which the text displays in the browser window, the amount of text, and how big the browser window has been opened. When you resize the window (whether in Dreamweaver or a browser), the way the text wraps around the image will change. Keep in mind also that what you see in the Dreamweaver document window is only an approximation of what will be seen in the browser.



Not a subscriber?

Start A Free Trial

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