Padding around dynamic generated rectangles

[Monkuar]

Here is my code:

for($i = 1; $i <= 30; $i++){
 
$pos1 = mt_rand(1,900);
$pos2 = mt_rand(1,100);
 
echo '<div class="itemLootBox Unique fadeIn" onclick="lootItem(this)" style="position:absolute;left:'.$pos1.'px;top:'.$pos2.'px">Lunar Rock</div>';
 
}

 

 

The dimensions of that container is:

Width: 980px

Height: 130px.

 

These correspond with $pos1 and $pos2 respectively.  I reduced 980 to 900 for the mt_rand because the boxes look weird when they get positioned to the edge. 

 

And my problem is, the divs are being randomly generated, but sometimes overlap others. Is there a way to add a function / if statement so I can check against $pos1, and $pos2 to add spacing so the boxes will never overlap? (They don't have to never overlap, but some type of padding would be way better).

 

Edit: Try to think of it as a grid like system, and each rectangle has it's own box of it's 'own' if you will. Wheres there is a padding around each grid. Not sure how to do this

Edited December 7, 2014 by Monkuar

[requinix]

Okay.

[Monkuar]

Okay.

Check edit. I clicked submit and the forum deleted ALL my writing, but left the code tags in. I had to re-write everything.

Edited December 7, 2014 by Monkuar

[Monkuar]

Found the solution!

 

Sorry for the double post, but I cannot edit my post?

 

Anyways:

for($i = 1; $i <= 30; $i++){
 
$pos1 = mt_rand(1,30);
$pos2 = mt_rand(1,30);
 
echo '<div class="itemLootBox Unique fadeIn" onclick="lootItem(this)" style="left:'.$pos1.'px;top:'.$pos2.'px">Lunar Rock</div>';
 
}

I simply added FLOAT:LEFT to my .itemLootBox container in my css! Then gave it a 30 top, and left padding for each float Works great now.

Edited December 7, 2014 by Monkuar