float not working as expected in ADE

[iain robinson]

Hi all

We have some text + a pic in coloured box that appears at the end of various articles within our ePub. It looks good in iBooks (see screenshot attached) but breaks down in ADE.

The code is as follows;
<div class="story rightFloat">
<p class="biography-in-blue-box"><span class="bio-blue-box-pic"><img alt="nicovaneijk.jpg" class="rightFloat" height="139" src="../Images/nicovaneijk_fmt.jpeg" width="98" /></span>Nico van Eijk is Professor of meh.</p>
</div>

and the CSS is;

p.biography-in-blue-box{
background: #662282 !important;
color: white;
font-weight: bold;
padding:0.5em;
margin-right:30%;
line-height:1.25em;
-webkit-hyphens:none;
}

span.bio-blue-box-pic{
width:100%;
float:right
}

Can anyone see how I can get it to work in ADE?

thanks,
Iain

[Jellby]

Originally Posted by iain robinson

It looks good in iBooks (see screenshot attached) but breaks down in ADE.

It may look good to you, but it's not floating or, at least, it's not what one intends when using floats.

The thing is you are using "width: 100%" for the span, so it takes the whole width of the paragraph, leaving no room for text. iBooks places no text there and skips until below the picture, while it seems ADE is placing always a word at least on each line.

I'd use something like:

span.bio-blue-box-pic{
  display: block;
  text-align: left;
}

I use "display: block", because you cannot use a <div> inside a <p>, but you could assign the background colour, etc. to the outside <div> and put the picture in another <div> before the <p>...

[iain robinson]

Thanks Jellby - I changed the span definition with my existing code and it is now working. And I can understand how it works. Brilliant - thanks!

[iain robinson]

A supplementary question if I may - I want that purple box not to get split over two pages. If I add display: inline-block; to the CSS for the containing paragraph (biography-in-blue-box), in ADE it doesn't split but the right margin disappears and the purple box fills the width of the whole page. If I preview it in a webkit-based reader (Ibis) the box's right margin is still honoured. Any way I can stop if filling the whole width in ADE (and webkit)?

[Jellby]

inline-block is not supported in the ePUB standard, so it's better not to use it. If you want to avoid page breaks inside an element, use "page-break-inside: avoid" (I'm not 100% sure that works in ADE, but it should)

[iain robinson]

Thanks Jellby. I'm pretty sure page-break-inside: avoid isn't supported in webkit but testing it out in ADE it works, but if I then apply the span to the image using the code you suggested earlier then it splits the paragraph after the pic (see attached). The text still clears the pic (here and on other pages) but it seems to be overruling the page-break-inside: avoid.

[Jellby]

I think I have had success by adding "page-break-after: avoid" (or -before) to the elements inside, try something like:

span.bio-blue-box-pic{
  page-break-after: avoid;
}

[iain robinson]

Thank you - that combination of code works great now

[AlexBell]

Originally Posted by Jellby

If you want to avoid page breaks inside an element, use "page-break-inside: avoid" (I'm not 100% sure that works in ADE, but it should)

It does on my Sony 650, and can be temporarily disabled by styling
"page-break-inside: auto;"