UL overlap, float: left image

Question

Possible duplicate:
Why list item markers overlap floating items

I had this problem with ul next to the floating image

Here is the code I used

<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 he changed to

 <ul style="overflow:auto;"> 

The list goes past the image, not what I want

Also the attempt below gives the wrong result

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

Photoshop of what I want

Answer 1

When using list-style: inside, also remove padding-left of. Gasket is usually determined by the browser. Alternatively, you can leave the position in the list style: outside and increase the margin on the left until the bullets overlap.

Answer 2

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

Answer 3

This is a great reference to how CSS works: CSS2.1 # floats

<ul> is a block element, so you can make a float next to the image without an additional div, for example, using the built-in styles:

 <ul style="float:left;"> 

Answer 4

The easiest way is to add margin-right: 20px; to your image. Or, if you only need to move your list and leave the surrounding text in place, add margin-left: 40px; in <ul> .

Answer 5

Another uncertain but working solution is to put each li in a separate ul and set the overflow: hidden on uls, for example: http://jsfiddle.net/xA9n8/