<figure>&<figcaption> with floating image, figcaption wraps, and article text wraps around image/caption

Question

Searched the web for weeks but can't find the answer that satisfies all my needs (only partial), help is very welcome.

What I want and have accomplished:

• Plain HTML5 compliant and CSS
• Show an image within an article
• Image must have a caption
• Caption must below the image
• Caption must be limited to horizantal size of image
• Caption may be longer than one line and text should wrap to next line (still within size of image)
• Image and caption must float as a group to left or right (think of using <figure class="left">)
• Text of article must wrap around the image and caption
• Image size varies (first image is e.g. 200px, 2nd image somewhere else in text is 320px etc.)

And now I like to add those requirements:

• I don't like to add the original width of the image like <figure class="left" style="width:200px"> but only if there is no other way.
• Responsive design: when the image width will occupy more that 50% of the display width, it must be limited to 50% of the display width.
• When the display width is 320px or below, the image must not float but must a block level element, so no text wrap of article around the image.

Where I left:

figure {
  display: inline
}

figcaption {
  display: block
}

figure.left {
  float: left
}

figure.right {
  float: right
}

<p>This is a part of the text of the article and at this point a image is inserted at the left side
  <figure class="left" style="width:250px">
    <img src="image.png" alt="img txt">
    <figcaption>image caption and a lot of text</figcaption>
  </figure>
  and the article text goes on and on so that it will wrap around the image</p>

(I left out the padding/margins and such to make it look better.)

Answer 1

Try the following css and look when you resize the browser, the text wrap on the image:

.left {
  float: left;
  border: 5px solid #BDBDBD;
  background: #E0E0E0;
  padding: 5px;
  margin: 0px;
}

figcaption {
  text-align: center;
}

Answer 2

Maybe this feels too html3 to you, but I found this answer:

http://www.sitepoint.com/forums/showthread.php?1049396-How-to-force-this-figcaption-element-to-respect-its-parent-s-width-boundaries

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

I don't think this is forbidden by HTML5 or CSS3 and it certainly seems to work for me.

Leaving aside the responsive design requirements - I feel like that's a separate question to which I don't have a good CSS-only answer.

Answer 3

This may help someone solve it. I am also looking for a way to display the caption on the right of the image with the same height as the image.

figure, .figure {
  
     display: inline-table;
}

figcaption {
    display: table-caption;
     caption-side: bottom;
      background-color: red;
  
}
     
img {
     width: 100%;
}
     
.image {
     width: auto;
}
     
     figure div {
          display: inline-table;
          background-color: aqua;
     }
     
.caption {
    display: table-caption;
     caption-side: top;
      background-color: red;
     margin: 0;
}

<figure>
    <h2 class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </h2>
    
        <img src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
        <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
</figure>

<figure>
    <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
    
        <img src="http://mintnet.net/images/thumbs/small-mossy.jpg">
       
</figure>

<figure>
    <div class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </div>
    
       <div><img  class="image" src="http://mintnet.net/images/thumbs/small-mossy.jpg">
            </div> 
       
</figure>