How can I make the width of my match the width of the >

Question

Say, I got this code:

Answer 1

This was really bothering me, because I wanted to find an answer to accommodate an upgrade to HTML5 that would successfully replace my original setup of displaying images and captions- a table with two rows (or one if no caption was available).

My solution might not work for everyone, but so far, it seems to do just fine in the major browsers (O, FF, IE, S, C), as well as being responsive on mobile devices:

figure {
border: 0px solid #000;
display: table;
width: 0;
}

The idea here is that figure is pushed into existence by the width of the img and so doesn't need any kind of direction.

figure img {
display: block;
}

This is used to rid ourselves of the useless, unsightly gap between the bottom of img and the bottom of figure.

figcaption {
text-align: left;
}

Now that figure has been pushed open just wide enough to let img in, figcaption text has only that limited amount of space in which to exist. text-align is not required for this solution to function.

This solution works as well as display: table-caption, but keeps figcaption contained in any border or background value that might need to be set.