Trouble recreating layout sans tables

[jcole3]

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. Read over the assignment criteria in Unit Seven in your course module. Access the Online Library and become familiar with navigating to and searching in the E-Resource Databases. You will be learning more about this useful resource in the upcoming units. Review Empower Module – Starting Your Research

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. Read over the assignment criteria in Unit Seven in your course module. Access the Online Library and become familiar with navigating to and searching in the E-Resource Databases. You will be learning more about this useful resource in the upcoming units. Review Empower Module – Starting Your Research

[themidiman · Accepted solution]

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.

[jcole3]

Jeffrey,

Thank you so much! That was exactly what I needed. And the need for the change is due to a visually impaired student who is enrolling in our online program. This was one of the last puzzle pieces I needed to get their courses ready.

[ag3811]

Jeffrey's basic suggestion - nested DIVs - is right, but for something like this I don't think you need to specify width or margin at all.  As long as every left-hand DIV has an icon of the same width in it, they should all line up.