I have an issue when using a custom list image/ where the icon is getting hidden behind the floated element which the list wraps around. 

<http://jsfiddle.net/V8evM/>

HTML

```
<div>

</div>
<ul>
    <li>This is list item no 1</li>
    <li>This is list item no 2. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no.</li>
    <li>This is list item no 3</li>
</ul>

```

CSS

```
div {
    background: rgba(0,0,0,0.8);
    float: left;
    width: 100px;
    height: 40px;
    margin: 0 20px 10px 0
}

li {
  padding-left: 1.3em ;
}

li:before {
  content: "i";
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}

```

NOTE: I do not want to add extra mark, CSS only. 

I have tried without the negative margin (<http://jsfiddle.net/9qWGE/>) but this causes the long list to appear under the icon