Split <li> into two column

Question

<ul>
    <li>
        <div class="ext-left">
            <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
        </div>
        <div class="ext-right">
            <a class="ext-name" href="#">Extension Name</a>
            <p class="ext-intro">Introduction here</p>
        </div>
    </li>
    ...
</ul>

I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/

Answer 1

Add this CSS:

.ext-left{

    float:left;
}
li{
    clear:both;
}

New fiddle here

Answer 2

Here is what you do

<ul>
<li style="width:150px">
    <div style="width:100px;float:left">
        <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
    </div>
    <div style="width:50px;float:right">
        <a class="ext-name" href="#">Extension Name</a>
        <p class="ext-intro">Introduction here</p>
    </div>
    <br clear="both"/>
</li>

The idea is as follows: 1. give the 'li' a width 2. give both div's a width 3. float left and right respectively 4. Add a beak with clear="both" at the end