title: arranging div one below the other
body: <p>I have two inner divs which are nested inside a wrapper div. I want the two inner div's to get arranged one below the other. But as of now they are getting arranged on the same line. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper{
          margin-left:auto;
          margin-right:auto;
          height:auto; 
          width:auto;
      }
      #inner1{
          float:left; 
      }
      #inner2{
          float:left; 
      } 
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="wrapper"&gt;
          &lt;div id="inner1"&gt;This is inner div 1&lt;/div&gt;
          &lt;div id="inner2"&gt;This is inner div 2&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>