Question

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

<div  style=" margin: 0 auto; width:640px; text-align: left">
     <div class="leftcol" >left column 1
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
           <p>my textmy text my text my text</p>
     </div>   
     <div class="leftcol" >left column
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
          <p>my textmy text my text my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
     </div>
     <div class="leftcol" >
           left column 2
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
    </div>

My css

.leftcol{width: 200px;background:yellow;margin-right:10px;float:left; }

all product divs are in same size that 200px, but the height of the div will change as like example, i need to show divs like this http://pinterest.com/

Display comes like this

but i need to fill that gaps by next divs example see this site [http://pinterest.com/][1] http://pinterest.com/

Answer 1

Finally div content from database cant align matrix with using only CSS. So surly we want use jQuery i go with “@Gaby aka G. Petrioli” answer in comment

use masonry.desandro.com or isotope.metafizzy.co