html - テーブルの代わりに div を使用する方法

Question

次のテーブル レイアウトを作成しようとしていますが、TABLE の代わりに DIV を使用したいと考えています。

------------------
|       |        |
| CELL1 |  CELL2 |
|       |        |
|       |--------|
|       |        |
|       |  CELL3 |
|       |        |
------------------

すべてのセルの高さをコンテンツによって設定したい (つまり、高さなし: スタイル)

float:left を cell1 で使用しようとしましたが、セル 2 と 3 を動作させることができないようです。

ここで JS Fiddle を編集します: http://jsfiddle.net/utZR3/

HTML:

<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>

CSS:

.list-row {
    background:#f4f4f4;
    border:2px solid red;
}

.list-left {
    width:auto;
    padding:10px;
    top:0px;
    left:0px;
    border: 2px solid blue;
}
.list-right {
    top:0px;
    left:60px;
    padding:10px;
     border:2px solid green;
}
.list-title {

    font-size:18px;
    padding:8px;

}
.list-filters {
    padding:8px;

}