Trying to get image captions to act correctly inside contenteditable. Problems I am noticing:
The first "Google" image is the original size at 50% - fine.
The second "Google" image is inside a "figure" tag. Problem - The "figure" box extends beyond the width of the image. I would like it to be the same size as the image - to auto size to the image.
The third "Google" image is also inside a figure tag, with float:left. Problems: The image size changes. Also, when you type a longer caption, the box just gets wider and wider - would like the figure box to keep the same width as the image and the longer caption to word wrap in the same width instead of widening, and image size to stay unchanged.
Trying "inline-block" in the CSS didn't seem to help matters.
Here's the fiddle.
<html>
<head>
<style>
figure {
//display: inline-block;
border: 1px dotted gray;
}
figure img {
//vertical-align: top;
}
figure figcaption {
border: 1px dotted blue;
text-align: center;
}
</style>
</head>
<body style="max-width:700px;">
<div class="content-area" style="border:1px solid">
<div contenteditable="">
<p style="text-align: center;">Welcome to my <b>WYSIWYG</b> Editor</p>
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figure>
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figcaption>Caption 1</figcaption>
</figure>
<br>
<figure style="float:left">
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figcaption>Caption 1 Caption 1 Caption 1 Caption 1 Caption 1</figcaption>
</figure>
<p>Queso camembert de normandie danish fontina. Port-salut parmesan cheese strings cheese and biscuits danish
fontina roquefort port-salut danish fontina. Lancashire rubber cheese ricotta camembert de normandie squirty
cheese goat say cheese emmental. Stilton stinking bishop everyone loves manchego who moved my cheese manchego
boursin queso. Babybel mascarpone cheeseburger cut the cheese.
Goat danish fontina pepper jack. Squirty cheese gouda parmesan goat say cheese melted cheese cheesecake
who moved my cheese. When the cheese comes out everybody's happy babybel croque monsieur jarlsberg chalk
and cheese cow the big cheese paneer. Rubber cheese cheesy feet bavarian bergkase say cheese cheese and
biscuits babybel monterey jack feta. Squirty cheese squirty cheese mozzarella fondue.
</p>
</div>
</div>
</body>
</html>