CODEWITHSUNDEEP
csshtmlresponsive-designoverlapping
Techagesite
Techagesite

Reputation: 475

Divs overlapping on browser resize

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>

`

Upvotes: 1

Views: 3615

Answers (2)

Bhushan wagh
Bhushan wagh

Reputation: 197

.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/

Upvotes: 1

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2552

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

Upvotes: 0

Related Questions