Wrapping text around an image

We recommend you wrap text around an image using one of the following methods.

Align image either left or right on the page and text will wrap around it, or
Align image using a 'display box' (<div>) with a built in area for captions. Depending which you use they are automatically set to align either left or right


1. Image is right-aligned and text wraps on the left	2. Image is in a left-aligned in a 'display box' (<div>) with caption. Text wraps on the right

The method you use depends on the purpose of your page and image. This page shows you how to wrap text by aligning the image (method 1).

For images with captions (method 2) see add a caption to an image

In Dreamweaver Select image by clicking on it	Page layout affected by adding an image to a page without wrapping text.
With the image selected look at the properties box. This shows alignment set to default
Select either left or right from the alignment drop-down menu in properties
Image is now right aligned (most suited in the example as it is at the top of the page. Headings and text are easier to read). Sometimes text will run over the image
Create 'white space' around the image This stops the text running over the image and being too close to the image edge image. Text is easier to read and the page feels more 'spacious and relaxed' Select the image On the left side of the properties box add V Space - 5 and H Space - 10 You may need to play around with these numbers to suit your page. H space can be less then 10 but usually not more than 10.
Comparison of H and V space added or not added
Image H and V space added. This creates 'white space'. Text is easier to read the the page looks less cluttered and 'relaxed'.	Image with no H and V space added. No 'white space' and text is close to image. Page is more cluttered.

University of Canterbury