title: Div matrix structure using css
body: <p>I am this html for my products display page in e-commerce site,  but some issues with alignment.... In this page will come near by 100 product  so i need to show it like matrix </p>
  
  <pre><code>&lt;div  style=" margin: 0 auto; width:640px; text-align: left"&gt;
       &lt;div class="leftcol" &gt;left column 1
             &lt;p&gt;my text&lt;/p&gt;
             &lt;p&gt;my text&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="leftcol" &gt;right column
             &lt;p&gt;my textmy text my text my text&lt;/p&gt;
       &lt;/div&gt;   
       &lt;div class="leftcol" &gt;left column
             &lt;p&gt;my text&lt;/p&gt;
             &lt;p&gt;my text&lt;/p&gt;
             &lt;p&gt;my text&lt;/p&gt;
             &lt;p&gt;my text&lt;/p&gt;
             &lt;p&gt;my text&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="leftcol" &gt;right column
            &lt;p&gt;my textmy text my text my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="leftcol" &gt;
             left column 2
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
            &lt;p&gt;my text&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My css</p>
  
  <pre><code>.leftcol{width: 200px;background:yellow;margin-right:10px;float:left; }
  </code></pre>
  
  <p>all product divs are in same size that <code>200px</code>, but the height of the div will change as like example, i need to show divs <a href="http://pinterest.com/" rel="nofollow noreferrer">like this</a> <a href="http://pinterest.com/" rel="nofollow noreferrer">http://pinterest.com/</a></p>
  
  <p>Display comes like this</p>
  
  <p><img src="https://i.stack.imgur.com/7tfFb.png" alt="enter image description here"></p>
  
  <p><a href="http://pinterest.com/" rel="nofollow noreferrer">but i need to fill that gaps by next divs example see this site [http://pinterest.com/][1] http://pinterest.com/</a></p>