Image captions and wrapping

Question

What\'s the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image should

Answer 1

This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.

You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.

Answer 2

figure {
  display: table;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
}

<figure>
  <img src="https://picsum.photos/200/50" />
  <figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>

You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.

Shameless plug: I blogged about this problem and my solution here, if you're interested.

Answer 3

The basic idea is to make one <div> with an <img> tag and <p> tag.

<div class="photo">
  <img src="someimage.jpg">
  <p>my caption
</div>

Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.

Create a class name it photo:

.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;

padding: 10px;}

Conclusion: 1. A div with an <img> tag and a <p> tag. 2. Div should have one class with different styles for <p> and <img> tag.

Answer 4

Pure HTML/CSS inline styled.

<div style="width:40%;
            margin-right:6%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<!-- NEXT ONE -->

<div style="width:40%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<div style="clear:all;"></div>

<!-- NEXT ROW -->


<div style="width:40%;
            margin-right:6%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="margin-top:0px;
                 padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<!-- NEXT ONE -->

<div style="width:40%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<div style="clear:all; height:100px;">&nbsp;</div>

Answer 5

Something like this: http://jsfiddle.net/QLcRC/ ?

Answer 6

You may use also use the HTML5 figure and figcaption elements and style those as @Wasim suggested.

<figure>
    <img src="/test.jpg" alt="a test-image">
    <figcaption>Description</figcaption>
</figure>

Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:

#content img[title]:after {
    content: "[" counter(image) "] " attr(title);
    counter-increment: image;
    display: block;
    text-align: center; }