keeping image and caption together

[whbenson]

Expanding on a solution PageLab posted for a different iBooks problem in
https://www.mobileread.com/forums/sho...d.php?t=172771, I've been using code like the following to keep images with their captions together on the same page:

XHTML

<p><span class="sidebar"><img alt="" class="scale" src="../Images/image.jpg" />caption</span>paragraph</p>

CSS

.sidebar {
page-break-inside: avoid;
display: inline-block;
margin: 0 .5em 0 0;
float: left;
width: 50%;
text-align: center;
font-size: .8em;
font-style: italic;
}
img.scale {
max-width: 100%; /* images never scaled up */
width: 100%;
}

This works - i.e. will start a new page if necessary - but instead of always starting at the top, sometimes overcompensates by spacing down some distance. I assumed this was just a quirk in iBooks to live with, but recently noticed the same thing when printing to a PDF from Sigil. [Incidentally, OSX Preview gives nearly instantaneous feedback on layout issues like this]. In any case I wonder if this clue helps anyone explain why this is happening, or have ideas for a workaround.
-Bill