Why Floating of Images not working properly in iBooks?

[Raja1205]

Text overlaps on Floated Images in iBooks

Hi,

I have created a sample ePub with CSS image floating style (Ex: img {float:left;}) and loaded into the iBooks (version 2.1.1).

Floating of "Image and text" displays well but in most of the occurrences "text content" overlaps on the floated images when increasing/decreasing the font size (zoom in/zoom out).

Screenshots attached for your reference.


Text overlaps on images (Before zoom in):

-----------------------






Text reflows properly (After zoom in):

--------------------





I have used the following CSS code for image floating:


CSS code:
---------

img{
float:left;
padding:0em 1.5em 1.5em 0em;
clear:both;
}

I am wondering, how this issue happens on iBooks because iBooks is the best ePub reading system from Apple.


Is it "iBooks" issue or CSS code issue?

Note: The same ePub sample displays well in all other ePub reading system (Example: Adobe Digital Edition, Calibre, etc.)

Could someone help me to solve this problem? Also advise how to identify the 100% zoom level in iBooks.


Thanks in advance for suggestions and help.


Thanks,
Raja. S