Split <li> into two column

<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开发者_C百科: http://jsfiddle.net/UeThn/1/

This is the correct version: http://jsfiddle.net/UeThn/10/

Add this CSS:

.ext-left{

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

New fiddle here

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

How about this:

li > div{
    display: inline-block;
}

[JSFiddle]

(But evil browsers won't support that, see info here)

Floating left seemd to work. Think you've done something wrong.

http://jsfiddle.net/UXnVJ/

You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.

Try this:

li {
    clear: left;
}

.ext-left {
    float: left;   
}

Float both divs to the left

.ext-left, .ext-right{
    float: left;
}

li {
    clear: both;
}