Indent list items with floating image: problem

Question

Hi guys,

I have already found following question with almost similar content: http://stackoverflow.com/questions/3797713/how-to-indent-list-items-using-css-when-you-have-floating-blocks

And here is my situation: if a list item gets too long, so that it automatically makes a line break, the text flow continues without the indentation.

Here is what I am expecting:

I can handle this using outside position property, modifying the margin or padding of an li element, if the text height is smaller than the image height. But if the text continues, especially on the bottom border of the image - it looks totally destroyed.

A good code to play with can be found here: http://csscreator.com/node/30984 on the second post.

Any help will be deeply appreciated

Answer 1

The most obvious, and simple solution, is to clear the list so that it's forced down under the floated elements, instead of sharing the same space as floated image, for instance, in this jsfiddle.

img {
    float: left;
}

ol {
    clear: both;
}

Of course, there will be other problems depending on the situation you're using this in, but otherwise it should solve your problem.