Making an image float to the left of an HTML list

Problem

Is it possible to float an image to the left of an HTML list. Well it seems possible, but can I make it look nice with the bullets not on top of the image? I need the bullets to line up with the text above and below the list.

Here's a jsfiddle with a heading and list underneath:

<img src="http://images.ucode.com/facebook.png"/>
<h1>A heading</h1>
<ul style="float: left">
    <li>a point</li>
    <li>another point</li>
    <li>third item</li>
    <li>trying to</li>
    <li>get past</li>
    <li>floating graphic</li>
</ul>

I love how the list flows around the image. Works great except the bullets for the list items that are to the right of the image should be aligned with the left side of the header.

Problem courtesy of: at.

Solution

By default, the list-style-position is set to outside so make it inside

ul {
    list-style-position: inside;
}

Demo


Though, there's a catch here, using inside is appropriate when dealing with single/multiple word list items which do not wrap, as the wrapped text will move below the bullet which you might not need, in that case, remove list-style-position: inside; and use margin on your img tag.

Solution courtesy of: Mr. Alien

Discussion

@Mr. Alien answered well. Another thing is to add margin/margin-right to img;

http://jsfiddle.net/gQZ3F/10/

Discussion courtesy of: Mihey Egoroff

Another solution would be to add position relative to the list and then give a left: value(ie 20px). Just a minor addition to Mr Alien's great answer, adding a margin-right to the image will not only push the list but also text that might exist before or after it- the result might seem misaligned. Here's a fiddle with the relative position approach:

https://jsfiddle.net/egeo/zgf4un7d/1/

img {
    float: left;
}

ul li {
  position: relative;
  left: 20px;
}
Discussion courtesy of: egeo

I have just added a wrapper to your ul which has float left

div.right {
float:left;
}

take a look

Discussion courtesy of: Prasad

A little padding to the right of the image should be ok?

img {
    float: left;
    padding-right:10px;
}
Discussion courtesy of: user3327205

This recipe can be found in it's original form on Stack Over Flow.