title: Overlap a div on top of another
body: <p>How do I overlap  a div on the top of another div on screen resize. Below is my html. I want the white div to go on top of another red div, when the screen is dragged from right to left. Right Now the white div just goes beneath the red div.</p>
  
  <p>below is my html:</p>
  
  <pre><code>&lt;div id="red"&gt;RED DIV&lt;/div&gt;
  &lt;div id="white"&gt;WHITE DIV&lt;/div&gt;
  
  #red{
       background:red;
       width:100px;
       height:100px;
       float:left;
       margin: auto 0;
       z-index:2
  }
  #white {
      background:white;
      width:100px;
      height:100px;
      margin: auto 0;
      float:left;
      position:relative;
      left:20%;
      z-index:200;
  }
  </code></pre>
  
  <p>EDIT: Please don't tell me to use position absolute. I want the text from the right side of white div to be trimmed on resize...</p>