css - Divs在浏览器调整大小时重叠

我遇到了一些问题，试图在浏览器中有空间时让这2个div并排放置，但是当调整较小的尺寸时，它们会彼此并排放置。
目前，当他们用完房间时，它们最终会重叠在一起

http://www.techagesite.com/page-1work11122.htm

`

css

.container3 {
width: 100%;

}
.left-column3 {
width: 50%;
float:left;
}
.right-column3 {
width:45%;
float:left;
}

html

<div class = "container3">
          <div class="left-column3" ><!-- Begin MailChimp Signup Form -->
<link href="unsaved://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#0F3053; border: 2px solid #0D3161; clear:left; font:14px Helvetica,Tekton pro;  width:200px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
              </style>
<div id="mc_embed_signup">
<form action="http://techagesite.us7.list-manage.com/subscribe/post?u=44c8ba9e80cfbb3aa7fae3b4d&amp;id=9a6386011a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <hr color="#FFCC00">
Subscribe For Free Mobile Stuff

<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" size="20">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>  <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup--></div><div class="right-column3" style="border: 2px solid #0D3161;">
<script async src="file://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 125 125 new -->
<ins class="adsbygoogle"
     style="display:inline-block;width:125px;height:125px"
     data-ad-client="ca-pub-2873697026320753"
     data-ad-slot="8526185658"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

`

最佳答案

.container3 {
    width: 100%;
}
.left-column3 {
    width: 90%;
}
.right-column3 {
    width: 90%;
}
/************responsive web design of 1024*************/
@media only screen and (min-width:1024px) {
 .left-column3 {
    width: 50%;
    float:left;
 }
 .right-column3 {
    width:45%;
    float:left;
 }
}

/我相信它将为您/

关于css - Divs在浏览器调整大小时重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23218809/