HTML: how to float image to right with caption

[klee11]

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=9hssTD5CKzBgLU90oGd0wPH..." 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=9hssTD5CKzBgLU90oGd0wPH..." 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? 😄 THANKS FOR ANY HELP!

[klee11]

Update: I found that when published, the table does not show the dashed lines. 🙂

[orra5 · Accepted solution]

Hi Kimberly Lee,

Try this:

<p style="text-align: center; padding-bottom: 15px; padding-left: 15px; float: right; display: block;"><img src="https://vccs.instructure.com/files/11980002/download?download_frd=1&verifier=9hssTD5CKzBgLU90oGd0wPH... alt="knockerballonthequad.jpg" width="400" height="400" data-api-endpoint="https://vccs.instructure.com/api/v1/files/11980002" data-api-returntype="File" /><br /><span style="font-size: small;">TYPE YOUR CAPTION HERE</span></p>

Best,

Alan

[klee11]

Thank you!! This works perfectly!!

[szw151]

Would it be possible for the RCE to provide a way to caption and image and associate it with page text apart from adding inline CSS? This is a very common need and is difficult to do well, so if people don't know about this code, the natural temptation is to use the table tool to associate an image with text. This promotes the inaccessible practice of using table code for purposes other than presenting table data.

[hansaagard]

Playing around with the text from Orra5 and some lorem ipsum after the initial text, this seems to work if the text is added after the image <p>, not before:

<p style="text-align: center; padding-bottom: 15px; padding-right: 15px; float: left; display: block;"><img src="http://static.greatbigcanvas.com/categories/boise-state-university-2221.jpg" alt="The Boise State football stadium seen from the air. " width="448" height="400" data-api-endpoint="https://vccs.instructure.com/api/v1/files/11980002" data-api-returntype="File" /><br /><span style="font-size: small;">The Big Blue</span></p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan consectetur felis et iaculis. Nullam vitae leo non ipsum sodales scelerisque quis eget dolor. Pellentesque porttitor turpis in ultrices mattis. Praesent eu finibus turpis, eu congue mi. Curabitur ac varius mi, a sollicitudin risus. Integer et imperdiet diam. </p>

Thanks for sharing!

[szw151]

Since we are limited to hand-coding, I suggest using figure and figcaption tags for better semantic mark up. Using a percentage for width will make the image responsive so that it looks good on all devices.<figure style="float: left; margin-left: 0;"><img src="image link"   alt="descriptive alt text" width="100%"   />
<figcaption>Image caption text</figcaption>
</figure>

To clear text after the image you can use style="clear: both;" adding to the next tag on the page.

[hansaagard]

Thanks for this clarification - I wasn't familiar with <figure>, that seems like the way to go. Thanks for the code! 

[szw151]

You can change left to right for the margin and the float properties.