cancel
Showing results for 
Search instead for 
Did you mean: 
grassedd
Community Participant

Formatting: indenting a text box

Jump to solution

I'll be happy with a reply that I'm doing this wrong, or just making it more complicated than necessary.

Designing a page, I made a text box using a 1x1 table, and then I indented the whole table by adjusting the table properties to 95% width and Right alignment.  However, now other content wants to squeeze into that extra 5% of space to the left of the table.  Here's a screenshot:

grassedd_0-1622217236124.png

I suspect the easy solution of inserting returns (to force the text below the table) will look wacky on different size screens.

Ideas?

Thanks,

Duane

0 Kudos
1 Solution

Accepted Solutions
James
Community Champion

Duane ( @grassedd ),

Using a table for layout purposes is frowned upon by accessibility guidelines. On the other hand, Canvas doesn't support all of the CSS that is needed to make accessibility happen. Fortunately, wrapping the element in a div can make this happen, but you will need to use the HTML editor to accomplish it.

Here is the barebone structure. Tweak the padding and colors to match your needs.

 

<div style="padding-left: 5%;">
  <p style="overflow: auto; background-color: #cccccc; padding: 0.5em;">
    <img style="float: right; padding-left: 1em;" src="URL to IMAGE" />
    Text goes here
  </p>
</div>

 

Here's what it looks like (with actual content)

James_0-1622220229355.png

If your text isn't as big as your picture, it looks like this (the forum software shrunk the width of the image, but look at the spacing):

James_1-1622220266414.png

 

 

View solution in original post

3 Replies
James
Community Champion

Duane ( @grassedd ),

Using a table for layout purposes is frowned upon by accessibility guidelines. On the other hand, Canvas doesn't support all of the CSS that is needed to make accessibility happen. Fortunately, wrapping the element in a div can make this happen, but you will need to use the HTML editor to accomplish it.

Here is the barebone structure. Tweak the padding and colors to match your needs.

 

<div style="padding-left: 5%;">
  <p style="overflow: auto; background-color: #cccccc; padding: 0.5em;">
    <img style="float: right; padding-left: 1em;" src="URL to IMAGE" />
    Text goes here
  </p>
</div>

 

Here's what it looks like (with actual content)

James_0-1622220229355.png

If your text isn't as big as your picture, it looks like this (the forum software shrunk the width of the image, but look at the spacing):

James_1-1622220266414.png

 

 

View solution in original post

grassedd
Community Participant

Thanks so much!  That works great.

(While I have you helping me, is there a way to add a border to this box?)

D.G.

James
Community Champion

D.G. ( @grassedd ), sure.

Use the border CSS property inside the paragraph's style element.

For example: border: solid black 1px; will add a solid border that is black and 1 px wide.

Not all border-related items are allowed. For example, border-radius is not allowed, but the basics of style, color, and width are.