お互いに2つのdivを配置する方法は？最初のdivはフォームを含み、2番目のdivはGoogleマップを含む

Question

私はお互いに2つのdivを配置するのに問題があります。 最初のdivにはフォームが含まれ、2番目のdivにはGoogleマップが含まれます。 私は間違いが何であるか把握できません。

HTML：

<div id="wrapper"> 
    <div id="first">[contact-form-7 id="116" title="Contact form"]</div> 
    <div id="second"> 
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3391.3063811555426!2d35.20240968523232!3d31.789398981281416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634ea0083%3A0x563ea54b03caa6a8!2sCompuskills!5e0!3m2!1siw!2sil!4v1488218811643" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </div> 
</div> 

CSS：

#wrapper { 
    width: 100%; 
    overflow: hidden; 
} 
#first { 
    width: 70%; 
    float:left; 
} 
#second { 
    width: 30%; 
    float:left; 

#wrapper { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
#first { 
 
    width: 70%; 
 
    float:left; 
 
} 
 
#second { 
 
    width: 30%; 
 
    float:left; 
 

 

 
div.wpcf7 { 
 
0; 
 
margin: 0; 
 
\t padding: 0; 
 
} 
 

 
div.wpcf7-response-output { 
 
\t margin: 2em 0.5em 1em; 
 
\t padding: 0.2em 1em; 
 
} 
 

 
div.wpcf7 .screen-reader-response { 
 
\t position: absolute; 
 
\t overflow: hidden; 
 
\t clip: rect(1px, 1px, 1px, 1px); 
 
\t height: 1px; 
 
\t width: 1px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
} 
 

 
div.wpcf7-mail-sent-ok { 
 
\t border: 2px solid #398f14; 
 
} 
 

 
div.wpcf7-mail-sent-ng { 
 
\t border: 2px solid #ff0000; 
 
} 
 

 
div.wpcf7-spam-blocked { 
 
\t border: 2px solid #ffa500; 
 
} 
 

 
div.wpcf7-validation-errors { 
 
\t border: 2px solid #f7e700; 
 
} 
 

 
.wpcf7-form-control-wrap { 
 
\t position: relative; 
 
} 
 

 
span.wpcf7-not-valid-tip { 
 
\t color: #f00; 
 
\t font-size: 1em; 
 
\t display: block; 
 
} 
 

 
.use-floating-validation-tip span.wpcf7-not-valid-tip { 
 
\t position: absolute; 
 
\t top: 20%; 
 
\t left: 20%; 
 
\t z-index: 100; 
 
\t border: 1px solid #ff0000; 
 
\t background: #fff; 
 
\t padding: .2em .8em; 
 
} 
 

 
span.wpcf7-list-item { 
 
\t display: inline-block; 
 
\t margin: 0 0 0 1em; 
 
} 
 

 
span.wpcf7-list-item-label::before, 
 
span.wpcf7-list-item-label::after { 
 
\t content: " "; 
 
} 
 

 
.wpcf7-display-none { 
 
\t display: none; 
 
} 
 

 
div.wpcf7 .ajax-loader { 
 
\t visibility: hidden; 
 
\t display: inline-block; 
 
\t background-image: url('../../images/ajax-loader.gif'); 
 
\t width: 16px; 
 
\t height: 16px; 
 
\t border: none; 
 
\t padding: 0; 
 
\t margin: 0 0 0 4px; 
 
\t vertical-align: middle; 
 
} 
 

 
div.wpcf7 .ajax-loader.is-active { 
 
\t visibility: visible; 
 
} 
 

 
div.wpcf7 div.ajax-error { 
 
\t display: none; 
 
} 
 

 
div.wpcf7 .placeheld { 
 
\t color: #888; 
 
} 
 

 
div.wpcf7 .wpcf7-recaptcha iframe { 
 
\t margin-bottom: 0; 
 
} 
 

 
div.wpcf7 input[type="file"] { 
 
\t cursor: pointer; 
 
} 
 

 
div.wpcf7 input[type="file"]:disabled { 
 
\t cursor: default; 
 
}

<div id="wrapper"> 
 
    <div id="first">[contact-form-7 id="116" title="Contact form"]</div> 
 
    <div id="second"> 
 
    <iframe style="border: 0;" src="https://www.google.com/maps/embedpb=!1m18!1m12!1m3!1d3391.3063811555426!2d35.20240968523232!3d31.789398981281416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634ea0083%3A0x563ea54b03caa6a8!2sCompuskills!5e0!3m2!1siw!2sil!4v1488218811643" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
 
    </div> 
 
</div>

Answer 1

あなたdiv sがdiv Sの幅がより多くのまで追加可能、あなたのスタイルシートに他のルールからいくつかのパディングやボーダーを継承することができます100％。そのためにはbox-sizing: border-boxを設定してみてください。

また、継承された余白を確認することもできます。

Answer 2

あなたの要素は、それぞれ70％です。彼らが一緒にページの幅以上を占めるならば、互いに隣り合って浮かべることはできません。第1の幅+一緒に加え第2の幅があることが必要未満100