Floating image with caption on its side

[roger64]

Hi

I managed to do this on a training book but when I visualize it with Calibre, it happens more than once that the image is in one page and the caption on the page before or after, which ruins the intended effect. Even closing them within the same div container with "page-break-inside: avoid;" does not do the trick.

Does someone has a code to achieve a similar thing? (see screenshot)

http://www.hostingpics.net/viewer.ph...1flottant.png]

http://hpics.li/a7bc9e7

[roger64]

If it looks impossible to do, I am thinking at two other ways:
1- putting together in a cadre the image and the caption (top or down), but this should be code-heavy and probably unstable
2- maybe letting the image floating alone (this is easy) and providing the caption with an hyperlink. There should be no problem clicking on the image even with a standard Kobo...

[jbacelar]

In ADE this works.



CSS:

img.foto2 {width: 100%; margin-left: -1em;}
span.foto2 {
  float: left;
  page-break-inside: avoid;
  width: 50%;
  padding-top: 0.2em;
  margin-right: 0.2em;
  padding-bottom: -0.5em;
  font-size: 0.8em;
}

Text:

 <p><span class="foto2"><img class="foto2" alt="04" src="../Images/04.jpg"/>Y esto y lo otro, y lo de más allá.</span>En aquel lugar, una punta avanzada permitía dominar el curso del Orange, a partir de la catarata, hasta una distancia de varias millas.</p>

[roger64]

Hi

Thank you for your help and sharing your code. I will try it.

[Ghitulescu]

For small images and long captions I simply use the TABLE