css - Custom list item background wrapped around floated element -

i have issue when using custom list image/ icon getting hidden behind floated element list wraps around.

http://jsfiddle.net/v8evm/

html

<div>  </div> <ul>     <li>this list item no 1</li>     <li>this list item no 2. list item no. list item no. list item no. list item no. list item no. list item no.</li>     <li>this 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: not want add mark, css only.

i have tried without negative margin (http://jsfiddle.net/9qwge/) causes long list appear under icon

ul {     display: table; /* or table-cell */  } 

table: behaves <table> html element. defines block-level box.

source

http://jsfiddle.net/pwqzs/1/