Breaking text between images

[RSoldin]

I have been trying to get a block of images to float right and the text to break after each image. Not sure if this has been discussed before. There are tons of questions about floating images right and wrapping text, but I am having problems with short blocks of text and with all images the same size. Let me explain.

I have a list of authors for a book, 8 or so. Each one has an image that I float right and have the text set to the left. I use Sigil for code editing and all looks great in the app and when I view the pages on a phone in portrait mode. If I turn the phone landscape or view it on a tablet, some of the images align themselves on the same line side-by-side ignoring the text float.

What I want is if the text is shorter than the image height the next author text should start below the previous author image which creates white space under the text until the next image author starts.

Here is the coding for each author block.

<div id="_idContainer005" class="Author-photo _idGenObjectLayout-1">
<img class="_idGenObjectAttribute-4" src="../Images/3.Micah_Jackson.jpg" alt="The Rev. Dr. Micah Jackson"/>
</div>
<p class="Frontmatter_bios"><span class="writer-name">The Rev. Dr. Micah <a id="Jackson">Jackson</a></span> is the president of Bexley Seabury Seminary Federation. He is also a certified Daring Way Facilitator and a partner in Backstory Preaching. </p>
<div class="_idGenClearFloat">
</div>

CSS=
div._idGenObjectLayout-1 {
float:right;
margin:6px 12px 6px 12px;
}
img._idGenObjectAttribute-4 {
height:100.00%;
min-width:100%;
width:100.00%;
}
div._idGenClearFloat {
clear:both;
}

I think I am just missing something simple but I can't figure it out.
Thank you

[thinkulum]

To handle this kind of situation, what I've done is to add a div with clear:both around the image and text pair that needs to have the breaks before and after. So for your example it would be

<div class="_idGenClearFloat">
<div id="_idContainer005" class="Author-photo _idGenObjectLayout-1">
<img class="_idGenObjectAttribute-4" src="../Images/3.Micah_Jackson.jpg" alt="The Rev. Dr. Micah Jackson"/>
</div>
<p class="Frontmatter_bios"><span class="writer-name">The Rev. Dr. Micah <a id="Jackson">Jackson</a></span> is the president of Bexley Seabury Seminary Federation. He is also a certified Daring Way Facilitator and a partner in Backstory Preaching. </p>
</div>

[RSoldin]

I appreciate the feedback. I messed with it for a while after I set the post and came to the same conclusion as your method suggests.

Happy New Year