Fit caption to the width of any image

dabblet.css

/**
 * Fit caption to the width of any image
 */
.captioned-figure {
	display: table;
	table-layout: fixed;
}
.captioned-figure img {
	margin-bottom: 10px;
	border: 0;
}
.captioned-figure .figcaption {
	display: table-caption;
	caption-side: bottom;
}
/* Container to add padding and border around the figure */
.captioned-figure-outer {
	display: inline-block;
	border: 1px solid #999;
	margin-bottom: 1.5em;
	padding: 20px;
	background-color: white;
}

html {
	background-color: #600;
}

.page {
	width: 80%;
	max-width: 50em;
	margin: 5em auto;
	padding: 2em;
	border: 1px solid #500;
	border-radius: 3px;
	color: black;
	background-color: #f0f0f0;
}

dabblet.html

<div class="page">
	<h1>Fit To Width</h1>

	<div class="captioned-figure-outer">
		<div class="captioned-figure">
			<img src="https://dl.dropboxusercontent.com/u/36859227/images/skylar.jpg" alt="Skylar's portrait" width="240" height="160">

			<div class="figcaption">
				This is a long caption of two or more lines. Increase the text size to make this wrap some more.
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

Thanks for posting this! It was exactly what I needed.