Avoiding dangling text when wrapping around a float

Question

The image says it best:

It's simply a float: left image (http://jsbin.com/itihes/1). Is there any way to prevent this problem with dynamic text in pure CSS? I do want the text to wrap, but if it's less than one full row (ideally two full rows), all the text would stay in the same block on the right.

The image width is fixed, but the whole block's width is dynamic.

Answer 1

DSKrepps got a point : The closest thing you can do is paragraph-by-paragraph on each

tag, such that the remaining text of that paragraph doesn't wrap but the next paragraph is full width.

What you'll do is smthing like this

.text-div p:first-child {
    overflow:hidden;
    line-height:(a number matching (img height + bottom margin) divider)
}

this way, your first paragraph wont wrap under .. but the other <p> will

jsfiddle for you : http://jsfiddle.net/6FQuH/

otherwise --> javascript