Question

I am not sure how to name my problem, so please see the diagram below:

+------------+
|            | <li>lorem ipsum dolor blah blah
|   image    | blah blah blah blah blah blah
|            | blah blah blah blah blah </li>
|            | <li> Blah blah blah blah blah
+------------+ blah blah blah blah blah blah
               blah blah blah blah blah blah
               blah blah blah blah blah </li>
<li>Lorem ispum dolor blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah</li>

Basically, I want the text to wrap around the image but if first line of a paragraph/list is next to the image I want the whole item to be left aligned to the first line even if there is space below image to fill.

Image has float: left;

Tried playing with display, widows and orphans properties but it didn’t work.

Answer 1

I couldn’t make it working in pure CSS so I’ve used some Javascript:

var $img = $("img");
var imageBottom = $img.position().top + $img.height();
var desiredMargin = $img.position().left + $img.width();

$("li").each(function(){
    if ($(this).position().top < imageBottom)
    {
        $(this).css("margin-left", desiredMargin);
    }
});

The working sample is here: http://jsfiddle.net/yVnNr/
The drawback is that layout re-flows after page load (unless the image dimensions are specified in the code).