Trouble recreating layout sans tables

Jump to solution
jcole3
Community Contributor

I am attempting to use some of the different styles in the style guide to replace a layout which currently uses tables. I am not sure the best direction to head (grids? image text combo class?), and would really appreciate your advice. Below is an example of the tables I am attempting to recreate.

 

Reading Assignments

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Online Activities

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

1 Solution
themidiman
Community Champion

My colleagues and I have used inline CSS on <div> tags to structure content in a table style. Accessibility ought to be a key factor to consider when you do this as screen readers will attempt to read the content linearly, so my recommendation is to keep the 2 column format. It boils down to a basic starter template as shown below: Try this code in the html view of any RCE editor enabled area of Canvas:

<div>
    <div style="width:100px;float:left;display:inline-block;">
        <!-- The icon content goes here. Adjust the px value to suit the needs
        of your icon or image -->

    </div>
    <div style="margin-left:100px;">
        <!-- This is the text content. Note how the px value of the margin-left rule matches
             width of the icon content div. Adjust as necessary -->

    </div>
</div>

It might help to put some filler text in each div so you can switch back to the visual view of the RCE and add your content using the Canvas RCE toolbar and keyboard. You should be able to switch back to HTML view as needed.

 

When you are ready to make a new section repeat the pattern. 

Hope that helps.

View solution in original post