AnsweredAssumed Answered

HTML: how to float image to right with caption

Question asked by Kimberly Lee on Nov 13, 2018
Latest reply on Nov 14, 2018 by Kimberly Lee

Hello!

 

I'm having difficulty floating an image to the right with a caption. I can add a caption underneath the image using a couple of different methods, using a div element as below, or figcaption, but when I add float to the mix, it floats the image, but does not retain the caption underneath the image. The main issue seems to be that Canvas does not allow for attributes for the div element.

 

Here is the code that produced the below (this was after trying adding float/margin elements to div):

 

<h2><span style="color: #008000;"><strong>Hello!</strong></span></h2>
<div><img style="float: right;" src="https://vccs.instructure.com/files/11980002/download?download_frd=1&verifier=9hssTD5CKzBgLU90oGd0wPHWh88WxNETbiGSehSG" alt="knockerballonthequad.jpg" width="400" height="400" />
<div><i><small>Me and some of my students playing Knockerball on the Quad.</small></i></div>
</div>
<p>I'm Kimberly Lee...

 

 

I can float a table, but I wanted to avoid using tables as it's not a good method for screen readers. Also, I can't seem to use the margin-left attribute on the table element to create padding between the text and table nor be able to get rid of the dashed borders around the table. Here's the code for the below:

 

<h2><span style="color: #008000;"><strong>Hello!</strong></span></h2>
<table class="image" style="float: right;">
<tbody>
<tr>
<td><img src="https://vccs.instructure.com/files/11980002/download?download_frd=1&verifier=9hssTD5CKzBgLU90oGd0wPHWh88WxNETbiGSehSG" alt="knockerballonthequad.jpg" width="400" height="400" data-api-endpoint="https://vccs.instructure.com/api/v1/files/11980002" data-api-returntype="File" /></td>
</tr>
<tr>
<td class="caption"><i><small>Me and some of my students playing Knockerball on the Quad.</small></i></td>
</tr>
</tbody>
</table>
<p>I'm Kimberly Lee...

 

 

Any other ideas on how to float the image, retain the caption below the imgae, have a nice visual padding to the left of the image, and avoid using a table? :-D THANKS FOR ANY HELP!

Outcomes