image caption display

[xmlgirl]

In ADE the caption seems to determine the width of the DIV in which the image is placed
https://xmlgirl.tinytake.com/sf/MTY0NDczXzEwMzUyNzA

I want it do display like it does in Calibre - wrapping under the width of the image
https://xmlgirl.tinytake.com/sf/MTY0NDc1XzEwMzUyNzI


<div class="fig">
<img alt="Philippine damage.jpg" src="../Images/Philippine%20damage_fmt.jpeg" />

<p class="caption">Damage from Typoon Haiyan in the Philippines</p>
</div>

div.fig {
margin: 0 0 1em 1em;
display: table;
float: right;
page-break-inside:avoid;
}

div.fig p {
display:table-caption;
caption-side:bottom;
text-align: center;
margin-top:2px;
font-size: 0.75em;
font-family:Verdana, sans-serif;
}

Is display: table messing me up again. Is there a better way to do caption?

Thank you!

[Turtle91]

I've never needed to use display table. I simply put it in a div. Something along the lines of:

<div class="fig"><img alt="" src="../Images/Philippinedmg.jpg" />Damage from Typoon Haiyan in the Philippines</div>

css:
div.fig {
margin: 1em 0 1em 1em;
float: right;
page-break-inside: avoid;
text-align: center;
font-size: 0.75em;
font-family: Verdana, sans-serif;
width: 25%;   (or whatever)
max-width: 300px   (the actual width of your img to avoid blurring when stretched)
}

div.fig img {
display: block;
margin-bottom: 2px
}

I would also try and avoid spaces in your file names...some systems barf on those.