html - Make grid of divs move depending on surrounding elements -

i trying grid of div elements dynamic grid system. when width , height of elements static (and importantly same) works setting float:left on element desired effect.

html:

<div id="main">     <div class="somediv">1 - text</div>     <div class="somediv">2 - text</div>     <div class="somediv">3 - text</div>     <div class="somediv">4 - lot longer text.</div>     <div class="somediv">5 - text</div>     <div class="somediv">6 - text</div>     <div class="somediv">7 - text</div>     <div class="somediv">8 - text</div>     <div class="somediv">9 - text</div>     <div class="somediv">10 - text</div> </div> 

css:

div.somediv {   float:left;   margin: 10px;   padding:5px;   width:150px;   display:inline-block; } 

if have 1 element has larger body of text inside (thus having larger height others) elements on row below , left of seem "pushed" down. behaviour can observed here; jsfiddle.

what wish div elements (in example elements 5,6 , 7) under elements above them (elements 1,2 , 3 in fiddle).

how can achieve this, whilst still keeping dynamic height of each div?

assuming columns have fixed width , ok fixed number of columns rework html have fixed width columns (divs) float left. put equal width divs in them , height won't matter.

if want dynamic number of columns method need use javascript move inner divs , decide number of cols have based on width assign dis columns.

i believe angularjs ui-grid can handle them more complicated situations often.

edit: here fiddle demonstrate. http://jsfiddle.net/6mdlc/ maybe misunderstood want, let me know if fiddle doesn't want

html:

<div class="main"> <div class="col">   <div class="content">       text   </div>     <div class="content">       text   </div>     <div class="content">       text asfklajjk alksjflf laj sflkjas lfkja lsfj alskfjasl fk alskfj alkfj al    </div>     <div class="content">       text   </div> </div> <div class="col">   <div class="content">       text asfklafjk alksjskf laj sflkjas lfkja lsfj alskfjasl fk alskfj alkfj al    </div>     <div class="content">       text   </div>     <div class="content">       text   </div>     <div class="content">       text   </div> </div> <div class="col">   <div class="content">       more text   </div>     <div class="content">       text asfklafjk alksjskf laj sflkjas lfkja lsfj alskfjasl fk alskfj alkfj al    </div>     <div class="content">       text   </div>     <div class="content">       text   </div> </div> 

css:

.content{   width:150px;   border:1px solid red;   margin-bottom:10px; } .col{   margin:5px;   float:left; } 

js:

$(".content").click(function () { if ($(this).html().length > 40) {     $(this).html("this random text"); } else {     $(this).html("this random text, taking more space before. cause others weird stuff."); } });