css - 子divを可変幅の親divの残りの幅までストレッチさせる

Question

私が抱えているこの正確な問題を検索しようとしましたが、実際には解決策を見つけることができませんでした。だから現在これは私がいるところです：

<div style="min-width:800px; max-width:1280px;">
    <img style="width:300px; height:300px; display:block; float:left;"/>
    <div style="float:left;">
    </div>
</div>

そして、これは私が達成しようとしていることです：

現在、テキストを含むdivは、画像のすぐ下に表示されます。これは、本来の機能です。どうやって欲しいのかわからない。私はテーブルの表示を避けようとしてきました...

とにかく、よろしくお願いします。

Answer 1

これを試すこともできます：

<div style="min-width:800px; max-width:1280px; position:relative;">
    <img style="width:300px; height:300px; display:block; float:left; position:absolute; top:0; left:0;"/>
    <div style="margin-left:300px;">
        <!-- Now this content will grow as much as it can without disturbing the column of the image -->
    </div>
</div>

Answer 2

ポジショニングを使おう！

<div style="min-width:800px; max-width:1280px; position: relative; padding-left: 305px;">
    <img style="width:300px; height:300px; display:block; position: absolute; top: 0px; left: 0px;"/>
    <div style="background: white;">

    </div>
</div>

スクリーンショット:

フィドル: http://jsfiddle.net/dsRVc/

---

長いテキストのプレビュー

フィドル: http://jsfiddle.net/dsRVc/1/