title: 2 DIVs are overlapping with float:right
body: <p>I am working in HTML and CSS and I find it difficult to rearrange my overlapping elements.</p>
  
  <p><a href="http://jsfiddle.net/br0re0r4/" rel="nofollow">Live example on the jsFiddle</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#posts {
      background: blue;
      float: right; 
      width: 75%; 
      padding: 5px;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
      box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  
  #login-container {
      overflow: clear;
      background: white;
      width: 280px;
      height: 330px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content" class="container"&gt;
    &lt;div id="posts"&gt;
      &lt;div id="login-container"&gt;
          &lt;div id="login"&gt;
              &lt;h1&gt;Member login&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These two always overlap to each other when I resize my browsers window.
  I wish I can post an image here but it needs 10 reps.</p>