iframeがその隣のdivとインラインでない理由

Question

問題は、同じCSS属性を持つdivの隣にあるdiv内のiframeをGoogleマップから取得していることですが、インラインではありません互いの上に一直線に並んでいる。

div.morecontent_holders { 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
    position: relative; 
 
    float: none; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    width: 90%; 
 
    min-width: 90%; 
 
    max-width: 500px; 
 
    min-height: 90%; 
 
    max-height: 1000px; 
 
    border-bottom: dashed 2px blue; 
 
} 
 
div.text1 { 
 
    position: relative; 
 
    display: inline-table; 
 
    float: center; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    width: auto; 
 
    height: 200px; 
 
    min-width: 200px; 
 
    max-width: 500px; 
 
    border-left: solid 2px silver; 
 
    border-right: solid 2px silver; 
 
    background-color: silver; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 5px; 
 
    background: #fff; 
 
    box-shadow: 0 1px 2px #c9c9c9; 
 
    -moz-box-shadow: 0 1px 2px #c9c9c9; 
 
    -webkit-box-shadow: 0 1px 2px #c9c9c9; 
 
    border-radius: 2px; 
 
    margin-bottom: 15px; 
 
    font-size: 1.4rem; 
 
} 
 
div.text1:hover { 
 
    box-shadow: 0 2px 2px #bababa; 
 
    -moz-box-shadow: 0 2px 2px #bababa; 
 
    -webkit-box-shadow: 0 2px 2px #bababa; 
 
}

<div id="page_1" class=morecontent_holders> 
 
    <div id="page_1" class=text1> 
 
    </div> 
 
    <div id="page_1" class=text1> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082" 
 
    width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
    </div>

Answer 1

div.morecontent_holders{ 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
    position: relative; 
 
    float: none; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    width: 90%; 
 
    min-width: 90%; 
 
    max-width: 500px; 
 
    min-height: 90%; 
 
    max-height: 1000px; 
 
    border-bottom: dashed 2px blue; 
 
} 
 
div.text1{ 
 
    position: relative; 
 
    display: inline-table; 
 
    float: center; 
 
    margin-top: 5px; 
 
    width: auto; 
 
    height: 200px; 
 
    min-width: 200px; 
 
    max-width: 500px; 
 
    border-left: solid 2px silver; 
 
    border-right: solid 2px silver; 
 
    background-color: silver; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 5px; 
 
    background: #fff; 
 
    box-shadow: 0 1px 2px #c9c9c9; 
 
    -moz-box-shadow: 0 1px 2px #c9c9c9; 
 
    -webkit-box-shadow: 0 1px 2px #c9c9c9; 
 
    border-radius: 2px; 
 
    margin-bottom: 1px; 
 
    font-size: 1.4rem; 
 
} 
 

 
div.text1:hover{ 
 
    box-shadow: 0 2px 2px #bababa; 
 
    -moz-box-shadow: 0 2px 2px #bababa; 
 
    -webkit-box-shadow: 0 2px 2px #bababa; 
 
}

<div id="page_1" class=morecontent_holders> 
 
     <div id="page_1" class=text1> 
 
     </div> 
 
     <div id="page_1" class=text1> 
 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082" width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
     </div>