Googleマップがコンテンツをプッシュダウンしていますか？

Question

私は左の連絡先情報と右のGoogleマップという2つの列を持っています。しかし、私はそれが欲しくないときにGoogle Mapsが左の列のすべてのコンテンツをプッシュしています。それはおそらく単純なものですが、私はそれを働かせるように見えません。私はCodePenを含んでいますので、あなたは問題を見ることができます：https://codepen.io/Macast/pen/QOXoMZ。私は、APIキーなしではGoogleマップが動作しないことを理解していますが、コンテンツはまだ左の列にプッシュダウンされているので、私は既に要求しています。画面がモバイルサイズで、正しく動作するときに列がスタックされ、2つの列が並べて表示されるデスクトップ画面用です。ご協力ありがとうございました！

HTML：

<div id="pageContainer"> 
    <div class="sectionContainer"> 
     <div class="leftColumn"> 
      <h1>Get in Contact</h1> 
      <hr style="width: 75%;"/> 
      <br /> 
      <h2>Address</h2> 
      <p>95 St. Peter's Road, Netherton, Dudley, West Midlands, DY2 9HN</p> 
      <h2>Tel/Fax</h2> 
      <p>01384 252943</p> 
      <h2>Email</h2> 
      <p>info@jfreemanandson.co.uk</p> 
     </div> 
     <div class="rightColumn"> 
      <div id="map"></div> 
      <script> 
       function initMap() { 
       var uluru = {lat: -25.363, lng: 131.044}; 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 16, 
        center: uluru 
       }); 
       var marker = new google.maps.Marker({ 
        position: uluru, 
        map: map 
       }); 
       } 
      </script> 
      <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE=initMap"> 
      </script> 

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

CSS：

#pageContainer { 
    width: 100%; 
    text-align: center; 
} 

.sectionContainer { 
    width: 80%; 
    margin: 0 auto; 
    display: table; 
} 

.leftColumn { 
    display: table-cell; 
    width: 50%; 
    background-color: #4f4f4f; 
    color: #ffffff; 
    box-sizing: border-box; 
    padding: 10px; 
} 

.rightColumn { 
    display: table-cell; 
    width: 50%; 
    background-color: #eeeeee; 
    color: #000000; 
    box-sizing: border-box; 
    padding: 10px; 
} 

#map { 
    height: 600px; 
    width: 100%; 
} 

Answer 1

.leftColumn { 
    vertical-align: top; 
} 

がトップに戻るあなたの左の列のコンテンツを揃えます。隣に座っている要素では、多くの場合、vertical-alignプロパティを含む頭痛のセーバーです。