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;
}
Attachment 168658Attachment 168659
I think I am just missing something simple but I can't figure it out.
Thank you
