title: Force Div below another and prevent overlap
body: <p>I have two Div elements. The first should be 100% height and width of the screen. I would like the second Div to be 100% width but variable height depending on the contents and to start inline (below the first). So the full screen is Div 1 and you have to scroll down to see Div 2. But everything I have tried they overlap.</p>
  
  <pre><code>&lt;div style="background-color:red;height:100%;width:100%;left:0px;top:0px"&gt;&lt;/div&gt;
  &lt;br/&gt;
  &lt;div style="width:100%;position:relative;background-color:yellow"&gt;
        &lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;..
  &lt;/div&gt;
  </code></pre>
  
  <p>​
  <a href="http://jsfiddle.net/FBJ8h/" rel="noreferrer">http://jsfiddle.net/FBJ8h/</a></p>