Positioning div up and down

Question

I am trying to create a layout where div floats like this

====                                  ==== 
 XX                                    XX  
====                    ====          ====
                         XX
                        ====     
          ====                            ====  
           XX                              xx
          ====                   ====     ====
                                  XX
                                 ====

What i want is to float div like this and animate them in loop from right to left.

The problem is i am unable to figure out a way to align them properly. These divs aren't limited they are lots of divs.

What i have tried

div{
   position:relative;
}
.div:nth-child(odd){
    left:10%;
    top:10%;
}
.div:nth-child(even){
    bottom:10%;
    right:10%;
}

I tried absolute & relative positioning and in both of them they are overlapping the divs. I want to that in a way so they do not overlap each other

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jan 11 '16 at 15:16

score 0 · Answer 1 · edited May 23 '17 at 11:44

If you want the DIVs to float around and not affect each other, they should have their positioning set to absolute.

So for example CSS for the element could look like this:

.floaty-element {
    position: absolute;                
}

When you create the elements make sure to set the top and left CSS attributes to position the element on the page.

Afterwards start an infinite loop and change the attributes to move them in circles unless they overlap. For an example on how to check if they overlap see How to check if an element is overlapping other elements?.

Positioning div up and down

1 Answers1