Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
klee11
New Member

HTML: how to float image to right with caption

Jump to solution

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...

297983_float image.JPG

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...

297984_float table.JPG

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!

Tags (3)
1 Solution

Accepted Solutions
orra5
Community Member

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

View solution in original post

8 Replies
klee11
New Member

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

orra5
Community Member

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

Thank you!! This works perfectly!!

szw151
Community Member

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
Community Member

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
Community Member

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.

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

szw151
Community Member

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