title: CSS Floated divs are overlapping on window resize. How do I stop this?
body: <p>I have just re-done my website at www.chartoonz.com</p>
  
  <p>I have created a wrapper div in which I have placed a div with a links to my videos on vimeo.  I float this div left, next to it I have floated a div with some text about the movie and floated it right.  The columns look ok, until the window resizes.  Then they overlap terrribly and I cannot figure out why.  In the event of a narrow window resize, I want the right float column to jump underneath the left floated column.</p>
  
  <p><strong>The relevant HTML looks like this:</strong></p>
  
  <pre><code>&lt;div id="CopyWrapper" &gt;
  
          &lt;div class = "copyFloatLeft"&gt;
          &lt;p&gt;&lt;strong&gt;Use Video to Communicate.&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;&lt;iframe src="//player.vimeo.com/video/90334225" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;&lt;/p&gt;
          &lt;br /&gt;
          &lt;/p&gt;
          &lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class = "copyFloatRight"&gt;
              &lt;strong&gt;Corporate Communications&lt;/strong&gt; 
              &lt;p&gt; Corporate communications can be greatly enhanced through a well presented video. Ideas and concepts are easier to understand when they can be seen clearly and their meaning is made plain. Here, I present some of the work I did over the last few months, helping the Merrill Lynch digital advertising division get their message out.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;br /&gt; 
  &lt;/div&gt;
  &lt;br class="clearFloat" /&gt;
  </code></pre>
  
  <p><strong>The governing CSS looks like this:</strong></p>
  
  <pre><code>#CopyWrapper{
  background: center;
  text-align: left;
  display: block;
  float: left;
  width: 65%;
  padding-left: 200px;
  position: relative;
  margin: 0 auto;
  clear: both;
  overflow: hidden;
  }
  
  
  .copyFloatLeft{
  background: center;
  width: 45%;
  margin:5px;
  padding: 15px 15px 5px 15px;
  position: relative;
  clear: right;
  float: left;
  display: block;
  }
  
  
  
  .copyFloatRight{
  background: center;
  width: 45%;
  margin:5px;
  padding: 15px 15px 5px 15px;
  position: relative;
  clear: right;
  float: right;
  display: block;
  
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Aharon</p>