ARCHIVED - Wrapping text around images and tables

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

1.0 Introduction
2.0 Examples of floated images and tables
- 2.1 How to float an image to the left
  - 2.1.1 Code
  - 2.1.2 Result
- 2.2 How to float an image to the right
  - 2.2.1 Code
  - 2.2.2 Result
- 2.3 How to float a table to the left
  - 2.3.1 Code
  - 2.3.2 Result
- 2.4 How to float a table to the right
  - 2.4.1 Code
  - 2.4.2 Result

1.0 Introduction

In the past, text was wrapped around images and tables using the align attribute. Since the align attribute has been deprecated, it is now necessary to use Cascading Style Sheets (CSS) instead. When applied properly, the float CSS property will cause text to wrap around tables and images.

The ".floatLeft", ".floatRight", ".image-left", ".image-right", and "div.wrapContainer" CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will need to define the following CSS classes:

.floatLeft{float: left;}
.floatRight{float: right;}
.image-left{float: left; vertical-align: text-top;}
.image-right{float: right; vertical-align: text-top;}
div.wrapContainer{width:99.5%; float:left;}

Note: A floated image or table should be the first element of the current display line and the text that will wrap around the floated image or table should use a div element to ensure consistent results across all browsers and platforms.

2.0 Examples of floated images and tables

2.1 How to float an image to the left

2.1.1 Code

<p>This is the text that precedes the image. This text will not wrap around the image.</p> <div class="wrapContainer"> <p class="image-left"><img src="images/wmms.gif" height="20" width="83" alt="Government of Canada" /></p> <div>This is the text that wraps around the right side of the image. This text will continue to wrap around the image until it is on a line that is not occupied by the floated image. From that point on, the text will wrap normally.<br /><br /></div> </div> <p>This text will not wrap around the image.</p>

2.1.2 Result

This is the text that precedes the image. This text will not wrap around the image.

This is the text that wraps around the right side of the image. This text will continue to wrap around the image until it is on a line that is not occupied by the floated image. From that point on, the text will wrap normally.

This text will not wrap around the image.

2.2 How to float an image to the right

2.2.1 Code

<p>This is the text that precedes the image. This text will not wrap around the image.</p>
<div class="wrapContainer">
<p class="image-right"><img src="images/wmms.gif" height="20" width="83" alt="Government of Canada" /></p>
<div>This is the text that wraps around the left side of the image. This text will continue to wrap around the image until it is on a line that is not occupied by the floated image. From that point on, the text will wrap normally.<br /><br /></div>
</div>
<p>This text will not wrap around the image.</p>

2.2.2 Result

This is the text that precedes the image. This text will not wrap around the image.

This is the text that wraps around the left side of the image. This text will continue to wrap around the image until it is on a line that is not occupied by the floated image. From that point on, the text will wrap normally.

This text will not wrap around the image.

2.3 How to float a table to the left

2.3.1 Code

<p>This is the text that precedes the table. This text will not wrap around the table.</p> <div class="wrapContainer"> <table class="floatLeft width50 data-table"> <thead> <tr> <th scope="col">Part Number</th><th scope="col">Price</th> </tr> </thead> <tbody> <tr> <td>53242</td><td>$599.99</td> </tr> <tr> <td>53123</td><td>$44.99</td> </tr> </tbody> </table> <div>This is the text that wraps around the right side of the table. This text will continue to wrap around the table until it is on a line that is not occupied by the floated table. From that point on, the text will wrap normally.<br /><br /></div> </div> <p>This text will not wrap around the table.</p>

2.3.2 Result

This is the text that precedes the table. This text will not wrap around the table.

Part Number	Price
53242	$599.99
53123	$44.99

This is the text that wraps around the right side of the table. This text will continue to wrap around the table until it is on a line that is not occupied by the floated table. From that point on, the text will wrap normally.

This text will not wrap around the table.

2.4 How to float a table to the right

2.4.1 Code

<p>This is the text that precedes the table. This text will not wrap around the table.</p> <div class="wrapContainer"> <table class="floatRight width50 data-table"> <thead> <tr> <th scope="col">Part Number</th><th scope="col">Price</th> </tr> </thead> <tbody> <tr> <td>53242</td><td>$599.99</td> </tr> <tr> <td>53123</td><td>$44.99</td> </tr> </tbody> </table> <div>This is the text that wraps around the left side of the table. This text will continue to wrap around the table until it is on a line that is not occupied by the floated table. From that point on, the text will wrap normally.<br /><br /></div> </div> <p>This text will not wrap around the table.</p>

2.4.2 Result