div在浏览器调整大小时重叠

Question

Im running into some issues trying to get these 2 divs to sit next to each other when there is room in the browser but when resized smaller they sit under each other. Currently they end up overlapping when they run out of room

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

/ I am sure it will help you /

Answer 2

Try it...

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