title: Automatically wraps div under if there is not enough space
body: <p>I am trying create a two column layout using divs.
  The parent div is X pixel, then it has too child div each takes a certain % of the parent's width.</p>
  
  <p>I want the div2 to wrap under div1 when I reduce the width of the browser without using javascript.</p>
  
  <p>From:</p>
  
  <hr>
  
  <h2>|  Div 1  | Div 2 |</h2>
  
  <h2>to</h2>
  
  <h2>|  Div 1  |</h2>
  
  <h2>|  Div 2  |</h2>
  
  <p>This is what I have so far, what should I do to achieve this?</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div style="width:200px; margin-top: 30px; border: 1px solid green; overflow: auto;"&gt;
    &lt;div style="background-color:red; width:100px; float:left;" &gt; 
      test  
    &lt;/div&gt;
    &lt;div style="background-color:yellow;"&gt;
      test2 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>