UL overlap, float:left image [duplicate]

Question

Possible Duplicate:
Why do my list item bullets overlap floating elements

I've been having this problem with ul's next to a floating image

Here is the code i've been using

<img src="abc.jpg" width="300" height="375" style="float:left;" /> Hello world isn't this amazing
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <!--list shortened for readability-->
</ul>
<p>Extra sample text here</p>

Result

If it's changed to

<ul style="overflow:auto;">

The list carries on past the image, not what i want

Also trying this below gives the wrong result

<ul style="list-style-position: inside;">

Photoshop of what i want

Answer 1

While using list-style-position: inside on the , also remove the padding-left of . The padding is usually defined by the browser. As an alternative, you could leave list-style-position: outside and increase the margin-left of until the bullets aren't overlapping.

Answer 2

you can put the ul inside a div and make the div float left after the image