Question: I have something like this:
<http://s9.postimg.org/wwizuwnq7/Untitled_1.png>

And if you see, the divs (Where I marked in green) have a space of some pixel.
And i want if there is a 0-20 pixel space between divs, to order them like this:
<http://s23.postimg.org/ky2htcpt7/image.png>

So, i started to do this on javascript and i dont know to to continue..

```
var position = new Array();
$(".post").each(function(){
    position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});

```

now i have all the position of all the divs, and now i need to check where divs have a space of 0 - 20 pixel, and then i want to take down the higher block.

I not sure if this is the good way, and if now, i need another idea..

Thanks!

Answer: 
I managed to find a method!

```
var position = new Array();
$(".hblocks").each(function(){
    position[$(this).attr("id")] = $(this).offset().top;
});

$.each(position, function(key, value) {
    $.each(position, function(key2, value2) {
        var space = value2 - value;
        if (space <= 20 && space >= -20 && space != 0)
        {
            var finalSpace = Math.max(value, value2);
            var spaceplus = space + 28;
            if (finalSpace != value)
            {
                $("#" + key).css("margin-top",spaceplus + "px");
            }
            else
            {
                $("#" + key2).css("margin-top",spaceplus + "px");
            }
        }
    });
});

```
This is untested but something like this should work after your code...

The idea is to continuously add 1pixel to the top margin of the problematic div until the difference between the two divs is 20px

```
 while(position['div1'] - position['div2'] <20){
     $('#div2').animate({marginTop: '+=1px'}, 0);​​​​​​​​​​​​​​​​​
 }

```

If you want to show them directly in line as in your picture, it's even easier:

```
 var diff = position['div1'] - position['div2']
 if(diff < 20){
     $('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);​​​​​​​​​​​​​​​​​
 }

```