div在瀏覽器調整大小時重疊

Question

我遇到了一些問題，試圖在瀏覽器中有空間時讓這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>

`

Answer 1

.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;
 }
}

/ 我相信它將對您有所幫助 /

Answer 2

試試吧...

 input {
            max-width: 100%;
        }

        #mc_embed_signup {
            background: #0F3053;
            border: 2px solid #0D3161;
            clear: left;
            font: 14px Helvetica, Tekton pro;
            width: 200px;
            max-width: 80%;
        }