br clear

[Notjohn]

At the end of a book, I am adding blurbs for three related books. They stack up nicely when viewed with the Sigil preview, but when I use the online previewer at the KDP platform, I get a rather different result when pages are shown. The first book shows splendidly, but the second and third get pushed into the next page with the result that one image is directly above the other on the left (40% width) while the text for the second image fills the righthand area, pushing the final text to occupy a space to itself beneath the images and the full width of the page.

On the web, I'd simply use br clear=all, but that of course fails epubcheck, and search as I can, I've found no way to make an equivalent declaration in a style. I've tried the usual suspects online but come away more confused than before.

What am I missing?

(I can of course simply omit the second and third images, which is what I'll do for the time being.)

Thanks!

[RbnJrg]

Originally Posted by Notjohn

At the end of a book, I am adding blurbs for three related books. They stack up nicely when viewed with the Sigil preview, but when I use the online previewer at the KDP platform, I get a rather different result when pages are shown. The first book shows splendidly, but the second and third get pushed into the next page with the result that one image is directly above the other on the left (40% width) while the text for the second image fills the righthand area, pushing the final text to occupy a space to itself beneath the images and the full width of the page.

On the web, I'd simply use br clear=all, but that of course fails epubcheck, and search as I can, I've found no way to make an equivalent declaration in a style. I've tried the usual suspects online but come away more confused than before.

What am I missing?

(I can of course simply omit the second and third images, which is what I'll do for the time being.)

Thanks!

What code are you using? Maybe with a simple table you can fix the things.

[Turtle91]

clear:both ??

.blurb     {clear:both; margin:1em}
.blurb p   {font-size:.8em; font-family:serif; text-indent:0; margin:0 0 .5em}
.image     {margin:0 .25em}
.image img {width:25%; max-width:600px; float:left; padding:0 5px 0 0}

<div class="blurb">
  <div class="image"><img.../></div>
  <p>yadda</p>
  <p>yadda</p>
  <p>yadda</p>
</div>

<div class="blurb">
  <div class="image"><img.../></div>
  <p>yadda</p>
  <p>yadda</p>
  <p>yadda</p>
</div>

<div class="blurb">
  <div class="image"><img.../></div>
  <p>yadda</p>
  <p>yadda</p>
  <p>yadda</p>
</div>

[AlanHK]

Originally Posted by Notjohn

On the web, I'd simply use br clear=all, but that of course fails epubcheck,

This works and passes all tests.

I do this to keep a sequence of bio paragraphs with a portrait each separated:

<div class="nobreak">
<p class="noindent"><img class="mug" src="../Images/01kadek.jpg" alt="01kadek"/> KADEK KRISHNA ADIDHARMA, translator of Nukila Amal, is an author, curator, translator and environmental engineer. He is an independent voice from Bali who writes on art and environmental issues through the lenses of culture, ecology and history.<br class="cb"/></p>
</div>

.nobreak {break-inside: avoid; display: inline-block;}
br.cb {clear: both;}
img.mug{width:25%;float:left;margin-right:1em;margin-bottom:0.5em;}

The div is to try to stop pagebreaks in the middle. Doesn't always work in practice, some readers are pigheaded.

[Notjohn]

Excellent, thanks!