2番目のテーブルセルが上部に揃っていない

Question

次のhtmlは左のdivにイメージを約20％表示し、2番目のdivにはテキストを入れ、残りの幅を占めるようにします。私が持っている問題は、画像が追加されたときに、第2のdivはボタンにプッシュされますです：

<div style="display:table; width: 100%; border: solid 1px blue;"> 

    <div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; "> 
     <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />    
    </div> 
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; "> 
     This is the area of the description 
    </div> 
</div> 

あなたが見ることができるように、この例では、下にテキストをプッシュします。私は、画像を削除した場合しかし、その後、すべてが順調です：

<div style="display:table; width: 100%; border: solid 1px blue;"> 

    <div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; "> 
     No Image   
    </div> 
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; "> 
     This is the area of the description 
    </div> 
</div>  

は、私が左に画像をフロートした場合、それが適切に動作しますが、テーブルは今

をブラウザの幅全体を取っていませんここで

<div style="display:table; border: solid 1px blue;"> 

    <div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; "> 
     <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />    
    </div> 
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; "> 
     This is the area of the description 
    </div> 
</div> 

私demo

です

私はさまざまなことを試みましたが、何も動作していないようです。だから誰でも私に何かヒントを与えることができれば、それは認められるだろう。

Answer 1

width:100%を最後のdivに追加することを忘れないでください。

これを参照してくださいJSFiddle。

それはこのようにする必要があります：

<div style="display:table; width: 100%; border: solid 1px blue;"> 

    <div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; "> 
      <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />    
    </div> 
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; "> 
     This is the area of the description 
    </div> 
</div>