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: 
You can do this by adding a container div around the bottom 2 blocks. That way they will always be in line, regardless of the height of either of the top two blocks. You should try not to use javascript for styling. CSS is very powerful.

Here's a fiddle: <http://jsfiddle.net/kVn7x/>

**HTML:**

```
<div>
    <div style='height:100px;'></div>
    <div style='height:200px;'></div>
</div>

<div style='clear:left'>
    <div style='height:80px;'></div>
    <div style='height:80px;'></div>
</div>

```

**CSS:**

```
div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}

```
Your answer would be some king of javascript+css coding to verify height of elements .. work on em then re-arrange them.

Stop trying to figure out by yourself, try using [Masonry](http://masonry.desandro.com/) or [jQueryEqualHeight](http://css-tricks.com/equal-height-blocks-in-rows/) explained on CSSTrick.

**What is Masonry?**

> 
> Masonry is a JavaScript grid layout library. It works by placing
>  elements in optimal position based on available vertical space, sort
>  of like a mason fitting stones in a wall. You’ve probably seen it in
>  use all over the Internet.
> 
> 
>