テーブルのレイアウト - テキストはdivの上部に残りません

Question

2つのテーブルセルで簡単なレイアウトを作成しました。私はマップとiframeを追加すると、赤いdivのテキストは、そのマップの下に移動しますが、私はそれが上にとどまりたいです。私はここで間違って何をしていますか？ ありがとうございます。

https://jsfiddle.net/skp114ab

HTML：

<div class="container"> 
    <div class="map"> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="100%" frameborder="0" style="border:0"></iframe> 
    </div> 
    <div class="block"> 
     text 
    </div> 
</div> 

CSS

.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
    position:absolute; 
} 

.map { 
    background-color: blue; 
    display: table-cell; 
} 
.block { 
    background-color: red; 
    width: 300px; 
    display: table-cell; 
} 

Answer 1

vertical-align: top~.blockを追加します。 fiddle

Answer 2

".block"

.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    position:absolute; 
 
} 
 

 
.map { 
 
    background-color: blue; 
 
    display: table-cell; 
 
} 
 
.block { 
 
    background-color: red; 
 
    width: 300px; 
 
    display: table-cell; 
 
    vertical-align:top; 
 
}

<div class="container"> 
 
    <div class="map"> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="100%" frameborder="0" style="border:0"></iframe> 
 
    </div> 
 
    <div class="block"> 
 
     text 
 
    </div> 
 
</div>

ため vertical-align:top;を追加し、これを試してみてください