If you want text to wrap around an image, be sure to first place the image carefully so that the reading of alt text by text-to-speech programs doesn't interrupt the flow of information then select the image and use the text alignment buttons.
If you want text to wrap around a small table or iframe, add a line after the table or iframe, select the table/iframe and line you have added and use the text alignment buttons. Then, delete the extra line.
[Advanced] If you want to achieve the same effects as above through HTML coding, add float: right; or float: left; to the style="" attribute of the object that you want text to wrap around.

[Advanced] If you want to create columns, edit the HTML below, add it to Canvas, and repeat this process for all remaining columns.

<div id="col[insert unique identifier]" style="display: inline-block; vertical-align: top; max-width: [insert numeric value]px; margin-right: [insert numeric value (usually 3)]%;">
<p>[Insert the content of one column here]</p>
</div>

[Advanced] Another, more acceptable and more mobile-friendly way to create columns is to use the bootstrap grid system.

<div class="grid-row">

<div id="col[insert unique identifier]" class="col-xs-12 col-sm-6 col-md-3">
<p>[Insert the content of one column here]</p>
</div>
<!-- Edit the numbers in this block of code to be the appropriate widths then copy and paste this code for each column in the row then add the content to the columns. -->

</div>
<!-- If you want a more tabular layout, copy and paste these three chunks of code (including the additional columns you  pasted) to create the number of rows you want -->

Already met? Skip to Next Button.

Layout Example

Below is a bunch of Lorem Ipsum or placeholder text that has been arranged in two columns using the second advanced method, and in the second column is an image that has been right floated. Click if you would like to skip the example.

Lorem ipsum dolor sit amet, ne pri nulla tibique sapientem, nostrum electram in nam, reque consequuntur ea eos. Id quo tale saperet nusquam. Nec rebum illum constituto an. Quaeque singulis consulatu in vim. Mazim omittam perpetua eos an, pro ut ludus voluptatum, primis blandit reprimique eos at. Id pro illum facer assum, vis utroque detraxit et.

In vis labitur labores. Eu nec corpora assentior, cu clita fierent sea. Numquam reformidans ne pro. Cum cu dolor vocibus, eam ad volumus volutpat. Pri ut prompta adolescens, dicta veritus ut sit.

Canvas logo Usu sale aperiri nostrum in, cu accusata democritum argumentum sit. Salutandi percipitur eam at, sed te euismod perpetua. Vim inani suavitate accommodare in, dico affert instructior ius id. Homero tritani appetere his ex, bonorum labores blandit ius ea, duo cu enim erant elaboraret. Accusam perpetua honestatis ne nam, id sed sumo saperet antiopam, nam ex sonet convenire consectetuer.

Benefits

These ways of creating layout better ensure that your content will look good and be readable regardless of the device it is viewed on. It also helps ensure that persons using text-to-speech programs are hearing content in the correct order.

If you want to test how your Canvas content looks on mobile devices, install the Canvas student app on your mobile device or use an Android emulator like Blue Stacks which allows you to have an Android tablet on your computer. See the Emulating Mobile Devices section of the Object Sizing page to learn more.

Why Is This Recommended?

Columns and text wrapping around content are not features that are needed on every page or in every course. However, there are times where these features are appropriate, so when they are used, they should be created using the methods discussed on this page in order to better ensure that your content adheres to WCAG 1.3.2 and the preferences expressed in WCAG Technique F46 and WCAG Technique F49 (both of which were discussed on the Textboxes and Callout regions page).

WCAG 1.3.2 requires that content be arranged in a way so that users of text-to-speech programs hear your content in the order that you intend them to read it. This means that using the spacebar or tabs to create the appearance of columns should not be done. Using tables to create the same effect, while do-able, is also frowned on by WCAG as expressed in Techniques F49 and F46. This is because tables were not designed for creating columns, but rather for organizing data. Additionally, using tables may make it difficult for users of text-to-speech users to focus on the content in the tables when they also have to hear, "Table with 3 columns and 1 row. Row 1, column 1."

By using the methods in this recommendation, you create a better user experience for all.

How to [Advanced]

For guidance on applying the recommendations labeled [Advanced] refer to the directions below or seek assistance from your college's Digital Learning Strategist. Additionally, if you're not used to working with HTML, you may want to review our HTML Crash Course page.

Advanced 1: Float

This layout technique aligns content to the left or right margin and allows surrounding content to wrap around it. Canvas makes it relatively easy to do this without editing code, but if you want to add Text and Object Spacing at the same time that you're adding the float, this is how you would do that.

Go to the page or post in Canvas that contains the content you want text to wrap around.
Open the page or post in editing mode.
Type xx to the left of or immediately above the content you want to have text wrap around.
Click the HTML Editor link.
Open the web browser's Find tool with Ctrl/⌘+F.
Use the Find tool to find xx.
Locate the opening tag for the content you want to have text wrap around.
This tag will likely be either <div, <img, <table, or <iframe.
Look for style=" between the portion of the opening tag shown in the previous step and its corresponding >.
1. If there is no style=", type style="" then place your typing cursor between the quotation marks.
2. If there is a pre-existing style=", place your cursor immediately to the right of the opening (first) quotation mark.
(Optional) Edit or add spacing code.
Type either float: left; or float: right;.
Left will put the content on the left margin. Right will put the content on the right margin.
Click the Rich Content Editor link or Save the page to see how your code looks.
If the changes aren't as desired, open the page again, open the HTML editor, Find xx, and make adjustments.
Repeat steps 11 and 12 until satisfied then delete the xx and save the page.

You can test how your Canvas content looks on the mobile app by installing the Canvas student app on your mobile device or by using an Android emulator like Blue Stacks which allows you to have an Android tablet on your computer. See the Emulating Mobile Device section on Object Sizing to learn more about setting up and using the emulator.

Advanced 2: Columns (version 1)

This method of creating columns is the first of two methods discussed on this page. This method is built in a way that may require you to spend time ensuring that the layout leads to a good Canvas app user experience, but requires less technical knowledge and math skills.

To create columns using this method, do the following:

Go to the page or post in Canvas where you want columns added.
Open the page or post in editing mode.
Create a new line where you want the columns added and type xx.
Click the HTML Editor link.
Open the web browser's Find tool with Ctrl/⌘+F.
Use the Find tool to find xx.
Move your cursor after </p>.
Press Enter 5 times then move your typing cursor to the middle (third) line you've created.

Paste the following code.

<div id="col[insert unique identifier]" style="display: inline-block; vertical-align: top; max-width: [insert numeric value]px; margin-right: [insert numeric value (usually 3)]%;">
<p>[Insert the content of one column here]</p>
</div>

Replace the bracketed content.
1. For id="col[...]": This piece of code, combined with your browser's Find tool, should help you find the code for your columns if you need to make adjustments later. Each column on the page should have a different, unique identifier. If you have only one set of columns on the page, we recommend that the identifiers be numbers (examples: col1, col2, col3). If you have multiple sets of columns on the page, you may want to assign each set a lowercase letter and then give each column in that set a number (examples: cola1, cola2, cola3, colb1, colb2).
2. For max-width: [...];: This code controls the width of your column. This code needs a pixel width (example: max-width: 600px;) and this width should be based on the thickness you want on a desktop computer. Because you use max-width instead of width, the column will respond to the limitations of mobile devices without requiring the mobile user to side-scroll to see everything or requiring the mobile program to zoom out in order to make all of the content visible. For more information, see Object Sizing.
3. For margin-right: [...];: This code creates space or gutters between columns. We recommend a small percent value (example: margin-right: 3%;) so that adequate space is created for the desktop experience while not significantly interfering with the mobile experience. For more information, see Text and Object Spacing.
4. For [Insert the content of one column here]: This is where you will add the content of your column. If you add this content while in the HTML editor, you will need to write the content using HTML. It's strongly recommended that you wait until you re-enter the Rich Content Editor mode before filling out this portion.
Move your cursor to the </div> tag at the bottom of your column and press Enter two to three times.
Repeat steps 9 and 11 for the remaining columns.
Click the Rich Content Editor link.
(If not already done) Replace [Insert the content of one column here] with column content.
Save your work to view the layout.
Use the Canvas Student app on your phone or an emulator on your computer to test how the columns look on mobile devices.
If the columns need editing, open the page in editing mode, click HTML Editor, use your browser's Find tool to find the id="" value for the column that needs adjustment, then make your adjustments.
Once satisfied, save your work.

Advanced 3: Columns (version 2)

This method of creating columns is the second of two methods discussed on this page. This method requires a bit more of a technical understanding of web design and some better math skills, but it is a method that creates a more reliable user experience across devices.

Go to the page or post in Canvas where you want columns added.
Open the page or post in editing mode.
Create a new line where you want the columns added and type xx.
Click the HTML Editor link.
Open the web browser's Find tool with Ctrl/⌘+F.
Use the Find tool to find xx.
Move your cursor after </p>.
Press Enter 5 times then move your typing cursor to the middle (third) line you've created.
Paste the following code.
```
<div class="grid-row">
```

Press Enter then paste the following code.

<div id="col[insert unique identifier]" class="col-xs-[12] col-sm-[6] col-md-[3]">
<div style="font-size: 0px; line-height: 0px; margin: 0px; padding: 0px; color: #fff; width: 1px; height: 1px; overflow: auto;">Entering column [insert number here]</div>
<p>[Insert the content of one column here]</p>
<div style="font-size: 0px; line-height: 0px; margin: 0px; padding: 0px; color: #fff; width: 1px; height: 1px; overflow: auto;">Out of column [insert number here]</div>
</div>

Replace the bracketed content.
1. For id="col[...]": This piece of code, combined with your browser's Find tool, should help you find the code for your columns if you need to make adjustments later. Each column on the page should have a different, unique identifier. If you have only one set of columns on the page, we recommend that the identifiers be numbers (examples: col1, col2, col3). If you have multiple sets of columns on the page, you may want to assign each set a lowercase letter and then give each column in that set a number (examples: cola1, cola2, cola3, colb1, colb2).
2. For class="col-xs-[...] col-sm-[...] col-md-[...]": This code controls the width of your columns and how the contents will wrap on smaller screens. To understand how this works, you first need to know that every webpage is made up of 12 columns. If you want your content to appear in 2 columns, you will need to set the col values to 6 because $12 \div 2 = 6$ . Now, if you want the desktop experience to have 4 columns, the tablet experience to have 2 columns and the mobile phone experience to have 1 column, you would set the col values to col-md-3 col-sm-6 col-xs-12. For this code, md means desktop, sm means tablet, and xs means mobile phone. If you want one column to take up more space than the other, then you would use different values for each column. To learn more about this, see W3School's Bootstrap Grid and Bootstrap Grid Examples.
3. For [Insert the content of one column here]: This is where you will add the content of your column. If you add this content while in the HTML editor, you will need to write the content using HTML.
Move your cursor to the </div> tag at the bottom of the column then press Enter.
Repeat steps 10 through 12 for the remaining columns.
Type or paste the </div>.
If you're making a table-like layout, either:
- Copy everything you've just done then paste it below what you've copied in order to create a new row.
- Repeat steps 9 through 14 to create another row.
Click the Rich Content Editor link.
(If not already done) Replace [Insert the content of one column here] with column content.
Save your work to view the layout.
Use the Canvas Student app on your phone or an emulator on your computer to test how the columns look on mobile devices.
If the columns need editing, open the page in editing mode, click HTML Editor, use your browser's Find tool to find the id="" value for the column that needs adjustment, then make your adjustments.
Once satisfied, save your work.

Additional Reading

Last Updated Summer 2018