Wrapping text around an image - How to - Web Team - University of Canterbury - New Zealand

Wrapping text around an image

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

  1. Align image either left or right on the page and text will wrap around it, or
  2. 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

Examples: recommended methods of text wrap around an image

Example of text wrapping around a right aligned image Example of 'display box' with caption and text wrapping
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 explains how to wrap text by aligning the image (method 1).

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


Align image left or right on the page so text wraps around it

These instructions apply to old and new branded sites.

1. First add the image to your page

  • See Add an image if you don't know how to do this).
  • It won't look very good but that's ok

2. Select the image with your cursor

  • The image below shows the image is selected.

3. Select either imgLeft or imgRight

  • Image showing the 3 steps described above