1

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: http://jsfiddle.net/cm94k/

Thank You

html used:

    <h3>I want the red "kitten"-caption to be generated with html/css. (This one is in the image!)</h3>
<p>
 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="http://tinyurl.com/ppy7cuk" />    

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    
</p>

css used:

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

}

.capimg {
    float: left;
    width: 33%;
}
RockScientist
  • 47
  • 1
  • 8

1 Answers1

2

http://jsfiddle.net/QxqL4/6/

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="http://tinyurl.com/qzxz95c" />
    This is what I would consider in terms of captioning. It should handle pretty much any length of text.
</span>
Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
  • This looks okay. Thank You. I need to accommodate for a fluid layout though, thus using percentage-values for img-width.- Fixed width won't work. – RockScientist Sep 28 '13 at 20:30
  • Okay I went and gave the span 33% and the img inside it 100%, this seems to work pretty well! Thank You! http://jsfiddle.net/cm94k/7/ – RockScientist Sep 28 '13 at 20:39