title: Arrange Div elements stacked next to other - Pinterest or Pose style
body: <p>I would like to implement the style used or followed for images/div arranged next to other in sites like <a href="http://pinterest.com">Pinterest</a> or <a href="http://pose.com/discover#posers">Pose</a> no matter what their individual resolution is. I have tried arranging div next to each other like this</p>
  
  <pre><code>&lt;div id="mainContainer"&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="differentHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;div class="sameHeightDiv"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#mainContainer { width:800px; }
  .sameHeightDiv{ float: left; width: 100px; height:190px; } 
  .differentHeightDiv { float: left; width: 100px; height:225px; }
  </code></pre>
  
  <p>Which is arranged like</p>
  
  <pre><code>1 2 3 4
        5
  6 7 8
  </code></pre>
  
  <p>Because 3'rd Div (.differentHeightDiv) height is greater, i know things will work if all heights are equal but i want a solution if its unequal (i mean if each div has different resolutions/aspect ratios) Some one please help me on this.</p>
  
  <p>Thanks.</p>