[RbnJrg]

Originally Posted by swepub

Ahh sorry - missed that:
In Adobe Indesign and cleanup done in Sigil.
EPUB3.

Hope that clarifies...

Ok. To maintain image and caption joined, do the following:

1. In your .xhtml file:

<figure class="wrapper">
  <img alt="" src="your_path_to_your_image" />
  <figcaption class="caption">Your caption here</figcaption>
</figure>

2. In your .css stylesheet:

.wrapper {
  float: left;
  width: 100%;
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.wrapper img {
  width: 100%; /* or the width you wish */
}

.caption {
  font-size: 0.9em; /* or the size you wish */
  font-style: italic; /* ad libitum :) */
}

This is the "basic" code (add margins/paddings, etc., where you need) and for images whose width is bigger than its height (things are a bit different when the height of the image is bigger than its width). As you can watch, the property "float" is present; this is key, because it will maintain the text flow and also the caption joined with the image; if the remaining space is enough for the image but not for the caption, the float property will move the image and caption to the following page to honors properties -webkit-column-break-inside: avoid and the others. If float is not present, the image and caption also will be moved to the following page but you also will have a big blank space that will ruin the flowing of the text.

I hope this can be of help. Also take into account that is ONLY for epub3 (it won't work properly on epub2).

EDIT: I forgot something important; if you are going to employ margins, paddings, borders, you need to include the property "box-sizing: border-box;".