Making an image float to the left of an HTML list

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.

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.