Question

I have 16 divs in my page and every div has a cross button on top right, on click of cross button that div should be hidden and the div which is next to hidden div should be re positioned, for example suppose we have 5 div

1 2 3 4 5

suppose 3 is crossed the sequence should be like

1 2 4 5.

there is one more button in divs which is like button, onclick of that button, that div should come to position 1 for example we have 10 divs like :

1 2 3 4 5
6 7 8 9 0

say 8 is liked then layout should be like:

8 1 2 3 4
5 6 7 9 0

Answer 1

You need to float your divs. When one is hidden, the rest will automatically move.

As for the repositioning, you need to move them around with jQuery.

Try this fiddle

HTML

<div id="container">
    <div class="box">1<br/><a class="like" href="#">Like me</a></div>
    <div class="box">2<br/><a class="like" href="#">Like me</a></div>
    <div class="box">3<br/><a class="like" href="#">Like me</a></div>
    <div class="box">4<br/><a class="like" href="#">Like me</a></div>
    <div class="box">5<br/><a class="like" href="#">Like me</a></div>
</div>

CSS

div.box { 
    display: block; 
    width: 90px; 
    height: 50px; 
    float: left; 
    margin: 5px; 
    border: 1px solid #000; 
    text-align: center;
}

Javascript

$('a.like').on('click', function () {
    $('#container').prepend($(this).parent());
    return false;
})

$('div.box').on('click', function() {
   $(this).hide();
})