How do you handle an image and caption with HTML/CSS?

**kenquad** · May 16, 2011 21:11

The routine task of adding a caption to an image seems ridiculously simple, but I feel that I still haven't found the optimal way to do it. I'm going to share what I've come up with (for lack of a better solution) - please post with your own practices!

For purposes of this example, we need to float the whole box - image and caption - left, and give it a margin.

HTML:

Code:

<div class="imgcaption left" style="width:200px"><!--200px is the width of our image.  This restricts the box to the image width so that the caption can't stretch it horizontally.-->
<img src="image.jpg" alt="Image alt text">
<span>Caption of this image</span>
</div>

CSS:

Code:

.imgcaption {
  border:gray 1px solid;
  margin:6px 12px;
}
.imgcaption img {
  margin:0; /*my caption-less images have default margins which must be overriden*/
  }
.imgcaption span {
  display:block;
  text-align:center;
  font-size:75%;
}
.imgcaption.left {
  float:left;
}

I'm particularly unhappy with having to specify a container width inline, but I can't think of any way to avoid it.

Now it's your turn