How to indent list items using CSS when you have floating blocks?

Question

I observed a relative strange behavior when I use floating images in a document. The list items indentation is made relatively to the 'red line' instead of the 'green' one.

Why is this happening and can I solve this?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>

Answer 1

I think you probably need to change the list style position to inside.

Answer 2

Just add ul { list-style-position: inside; } because by default it is set to outside, not sure why.