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

Question

I searched the network for weeks, but I can’t find an answer that satisfies all my needs (only partial), help is very welcome.

What I want and achieved:

• Simple HTML5 compatible and CSS
• Show image in article
• Image must have caption
• Signature must be below image
• The inscription should be limited to the horizontal size of the image.
• The title can be longer than one line, and the text should be wrapped to the next line (still within the image size)
• The image and caption should float like a group to the left or right (think about using <figure class="left"> )
• The text of the article should flow around the image and signature
• Image size varies (for example, the first image is 200 pixels, the second image somewhere else in the text is 320 pixels, etc.)

And now I would like to add these requirements:

• I do not like to add the original image width, for example, <figure class="left" style="width:200px"> but only if there is no other way.
• Responsive Design: When the image width is more than 50% of the display width, it should be limited to 50% of the display width.
• When the screen width is 320px or lower, the image should not float, but should be a block-level element, so the text should not wrap around the 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 skipped padding and margins to make them look better.)

Answer 1

Try the following CSS and see when you resize the browser, the text wraps around the image:

 .left { float: left; border: 5px solid #BDBDBD; background: #E0E0E0; padding: 5px; margin: 0px; } figcaption { text-align: center; } 

Answer 2

Maybe this is too html3 for 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 seems to work for me.

Leaving aside the design requirements, I feel that this is a separate question for which I do not have a good answer only on CSS.

Answer 3

This may help someone solve the problem. I am also looking for a way to display a caption to the right of an 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>