Awkward Line Wrap Around Image

Probably easiest to explain what I'm after with an image: When I float an image the text runs around it which is great. BUT, depending on the amount of text and the image size, I'

Solution 1:

I don't think you can do this in CSS. However, I don't think the JavaScript would be overly complicated either. I'd recommend using element.getClientRects(), which returns a list of TextRectangle objects. For inline elements, each TextRectangle object represents a line of text.

If you check that the left offset of the last TextRectangle is different to the left offset of the penultimate TextRectangle, you know that the last line is a "straggler" and can adjust the image's bottom margin by the height of one TextRectangle (bottom - top).

getClientRects was standardised in CSSOM, but may have buggy implementations in some browsers.

From a more personal point of view, I'd say that I think it looks fine the way it is and I probably wouldn't worry about it if I were you.

Solution 2:

The easiest fix for this is to add another DIV around your text and float that left as well.

So your html would end up like:

<div><imgsrc=""><div>
        My text...
    </div></div>