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:

Code:

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>...

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)?

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)

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.