[ACCEPTED]-Image captions and wrapping-html

Accepted answer

Score: 23

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>

enter image description here

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

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

Score: 2

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

Score: 2

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

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

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

Create a class name 4 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 3 div with an <img> tag and a <p> tag. 2. Div should 2 have one class with different styles for 1 <p> and <img> tag.

Score: 2

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

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

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

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

Score: 1

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>

Score: 0

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

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

Source: stackoverflow.com

[ACCEPTED]-Image captions and wrapping-html

How to detect which one of the defined font was used in a web page?

Semantic value of span

ASP.NET Control to HTML tag equivalent

What is the best way to display HTML content on a Windows Form?

Why is my element with position:absolute always showing up underneath position:relative items?

What image type should I use when? GIF, JPG or PNG?

jQuery / Javascript replace <space> in anchor link with %20

fastest way to use css for html table without affecting another html table

css background image positioning (negative position?)

Creating heatmaps using <canvas> element?