jquery - Float bottom - top of each other -

hi every 1 want ask css - jquery drag , drop -issue. i'm familiar positioning divs bottom of containers (position: relative -> position: absolute; bottom: 0;).

goal: want drag items storage div , drop div , position items bottom top, vertically. building tower (2d) or something. how can float items bottom of new container , top of each others?

thanks - jani

#drop {     height:300px;     background:#edcce9; } #drag {     margin-top:10px;     height:50px;     background:#b8d8e3; } #drag img {     display: inline-block;     margin-right:10px; } .temp {     display: block; } 

---

$('.item').draggable({     containment: 'document',     revert: true,     helper: 'clone',     start: function () {         contents = $(this).html();         currentvalue = $(this).attr('value');     } }); $('#drop').droppable({     hoverclass: 'border',     accept: '.item',     drop: function (event, ui) {         $(this).append($(ui.draggable).clone());         $('#drop .item').addclass('temp');         $('.temp').removeclass('ui.draggable item');         $(".temp").draggable({             containment: 'document',             revert: true         });     } }); $('#drag').droppable({     hoverclass: 'border',     accept: '.temp',     drop: function (event, ui) {         $(ui.draggable).remove();     } }); 

---

<div id="drop"></div> <div id="drag">     <img src="blocks/a.png" width="50px" height="50px" class="item" />     <img src="blocks/b.png" width="50px" height="50px" class="item" />     <img src="blocks/c.png" width="50px" height="50px" class="item" />     <img src="blocks/d.png" width="50px" height="50px" class="item" />     <img src="blocks/e.png" width="50px" height="50px" class="item" />     <img src="blocks/f.png" width="50px" height="50px" class="item" /> </div> 

sadly, there no "float:bottom;" type construction this. have use position:absolute; described.

to want can either rely on jquery apply correct bottom value (you can measuring number of items in container, dividing value height of each item, provided same size in example.)

to count items in stack, can use .length() read here more

or

you can css using :nth-child selector. problem this, is not supported in browsers (by mean ie8 , below) see can use it details.

with method, create list so, specified bottom values increased:

li:nth-child(1) {     bottom:0; } li:nth-child(2) {     bottom:50px; }     li:nth-child(3) {     bottom:100px; } ... 

this ad nauseum. issue if know how many items need account , requires lot of css added if have lot of items account for.

---

if not same size, have use jquery method and, instead of counting number of items in stack, need pull height of them , use calculate proper bottom value