How can I caption an image inside a paragraph


Tags: html,css,captions

Problem :

I spent the past three hours trying to figure out how to properly caption floated images inside paragraphs. I found numerous websites covering the task of captioning images, but none of them were dealing with captioning an image inside a paragraph. The deal breaker here is the inability to have elements other than em>, strong>, img> and such within p>. Whats the best practice to handle image captions in paragraphs?

I prepared a jsfiddle:

Thank You

html used:

    <h3>I want the red "kitten"-caption to be generated with html/css. (This one is in the image!)</h3>
 eginning of the paragraph, but the end-tag  is optional. Nevertheless, consistently including the end-tag is a good practice, and make certain types of automated processing easier. More importantly, it helps to make explicit 

    <img class="capimg" src="" />    

exactly where your paragraph really ends, which may differ quite significantly from where you as an author would have it. The ambiguity arises from the fact that HTML prescribes quite rigidly which elements may nest inside other elements. The only things that    

css used:

p {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    -moz-column-gap:2em; /* Firefox */
    -webkit-column-gap:2em; /* Safari and Chrome */


.capimg {
    float: left;
    width: 33%;

Solution :

The way I have handled this in the past is to wrap the image in a <span> and float that element. You should be able to add text after the image but still inside the <span> without issue.

The only caveat is that you need to specify the width of the <span>. Since your images may vary, I would suggest doing this inline, setting the <span>'s with to match the width of the image.

<span class="capimg" style="width:200px;">
    <img src="" />
    This is what I would consider in terms of captioning. It should handle pretty much any length of text.

    CSS Howto..

    How to scale image with with transition CSS? [closed]

    How to change the background image of input button with jquery

    How to overwrite “left: 80%” from inline CSS

    How to make a image css not move at text?

    How to style ul horizontally

    How to speed up a slow loading PHP page that is processing several large arrays?

    How can I vertically align the text on these CSS buttons?

    How i change the dataTables_filter css class

    HTML – Show menu on hover

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How to prevent inner text resizing in CSS Animation @keyframes?

    How can I make an only active on mobile devices?

    How to get my app to fill the full height on mobile?

    How to make JS/Jquery Css and HTML popup

    Html, table, img & css - how to get text to wrap correctly?

    How to use scss with css modules / postcss inside components

    How to CSS: select element based on inner HTML

    How can I use CSS to preserve line breaks in an HTML block?

    How to make the div at the screen center not lower right corner?

    How to know from css if a select is opened

    How to get CSS in Javascript working correctly

    How to customize Subscribe2 button appearance in WordPress?

    How to define text spacing in input in css

    How to Toggle CSS3 Accordion on Click

    How to make a TableLayoutPanel like resizable div in html

    :hover property overriden after jquery effect, how to get it back?

    How do I avoid a fullscreen background image to scale with appearing scroll bars?

    How to modify css in OpenERP 7?

    Angular 2: How to change an element’s CSS class onclick and to remove all others (Plnkr)

    How do i get the submenus to show with a small window size?