title: CSS overlay div with another div
body: <p><strong>Goal:</strong> I am trying to move divs ( blue + green ) above banner ( red ).</p>
  
  <p>Purple div have different amount of content, so its height is variable. 
  Consider header (yellow) and banner ( red ) with fixed height so you can use fixed position.</p>
  
  <p>My try is in jsfiddle.</p>
  
  <p><strong>JsFiddle:</strong> <a href="http://jsfiddle.net/dEb3m/" rel="nofollow noreferrer">http://jsfiddle.net/dEb3m/</a></p>
  
  <p><img src="https://i.stack.imgur.com/7UlAR.jpg" alt="goal"></p>
  
  <p>This is final output.</p>
  
  <p><img src="https://i.stack.imgur.com/k2qqU.png" alt="new"></p>
  
  <p>Banner is in background. News (green) is relative to main ( orange )</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="header"&gt;header&lt;/div&gt;
  &lt;div id="banner"&gt;banner&lt;/div&gt;
  
  &lt;div id="search"&gt;search&lt;/div&gt;
  
  &lt;div id="news"&gt;
  
      &lt;div class="new_item"&gt;new 1&lt;/div&gt;
      &lt;div class="new_item"&gt;new 2&lt;/div&gt;
      &lt;div class="new_item"&gt;new 3&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
  
  &lt;div id="main"&gt;main&lt;/div&gt;
  &lt;div id="footer"&gt;footer&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header, #banner, #main, #footer {
      width: 400px;
  }
  
  #banner {
      height: 100px;
  }
  
  #search {
      width: 100px;
      float: left;
  }
  
  #news {
      display: inline-block;
      width: 300px;
  }
  
  .new_item {
      display: inline-block;
      float: left;
      min-height: 100px;
      width: 150px;
      max-width: 150px;
  }
  </code></pre>