title: How to wrap a div vertically and then horizontally
body: <p>I need to show the search result data in my site horizontally. I follow a metro UI approach for my website, so I want the data to flow horizontally instead of vertically.</p>
  
  <p>What I require is demonstrated in the below image:</p>
  
  <p><img src="https://i.stack.imgur.com/L6Jga.png" alt="Desired OutPut"></p>
  
  <p>The resulted data is dynamic. I want to draw the divs vertically first based on the parent div height and then horizontally. Something similar to WPF wrap panel, but I haven't been able to achieve it yet. </p>
  
  <p>This is what I have tried, drawing horizontally and then vertically:</p>
  
  <p><strong>Fiddle</strong>: <a href="http://jsfiddle.net/4wuJz/2/" rel="noreferrer">http://jsfiddle.net/4wuJz/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
     &lt;div id="wrap1"&gt;
         &lt;div class="result"&gt;
             &lt;div class="title"&gt;1&lt;/div&gt;
             &lt;div class="postcontent"&gt;  
                &lt;p&gt;Test&lt;/p&gt;
             &lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="result"&gt;
             &lt;div class="title"&gt;2&lt;/div&gt;
             &lt;div class="postcontent"&gt;
                &lt;p&gt;Test&lt;/p&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#wrap {
     width:100%;
     height: 500px;
     background-color: rgba(0,0,0,0.5);
     overflow:scroll;
     overflow-y:hidden;
  }
  
  #wrap1 {
     width:2500px;
     height:500px;
     text-align: center;
  }
  
  
  .result {
     width: 300px;
     vertical-align: middle;
     float:left;
     background: rgba(120,30,20,0.5);
     padding: 10px;
     margin: 30px 0px 30px 30px; 
  }
  </code></pre>
  
  <p>How can I change my code so that I meet the desired output? Any jQuery plugins available for this?</p>