Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 12-28-2018, 02:24 PM   #1
RSoldin
Junior Member
RSoldin began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2011
Device: none
Breaking text between images

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;
}
Click image for larger version

Name:	Screen Shot 1.jpg
Views:	67
Size:	72.0 KB
ID:	168658Click image for larger version

Name:	Screen Shot 2.jpg
Views:	67
Size:	62.2 KB
ID:	168659
I think I am just missing something simple but I can't figure it out.
Thank you
RSoldin is offline   Reply With Quote
Old 12-31-2018, 12:02 PM   #2
thinkulum
Junior Member
thinkulum began at the beginning.
 
Posts: 2
Karma: 10
Join Date: May 2012
Device: iPod touch
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

Code:
<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>
thinkulum is offline   Reply With Quote
Advert
Old 01-01-2019, 11:01 PM   #3
RSoldin
Junior Member
RSoldin began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2011
Device: none
Fixed

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
RSoldin is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Moving text with a non-breaking space [&nbsp;] mcdummy Editor 4 08-23-2016 11:45 AM
Preventing images breaking across pages verydeepwater ePub 12 05-16-2014 01:00 PM
TEXT WRAP AROUND IMAGES RKEP71 Sigil 1 06-20-2011 08:26 PM
pdf to epub/breaking up images? dhume01 Calibre 1 07-06-2010 08:51 PM


All times are GMT -4. The time now is 04:05 AM.


MobileRead.com is a privately owned, operated and funded community.