My HTML code resembles this:
<div class="figure">
<img src="some_image.png" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>
Is there a CSS trick that can make the div with class figure adjust its width dynamically based on the image and caption it contains? I want to add a border around them without manually setting the width in pixels.
Check out an example below (div.figure expands to fill available space)
div.figure {
border: 1px solid black;
}<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>