Div Random Positioning Without Overlap
<p>I am trying to make a series of divs be randomly placed within another div, without overlap. I am having issues getting them to not overlap but can't seem to figure out why. I've attached the entire script to run, but I think the problem lies in the piece of code I left at the end.</p>

<pre><code>&lt;?php
$number_of_tags = 7;    // Number of tags in tag cloud, excluding search box
$tags = array();        // Initiate tags() array
$weight = array();      // Initiate weight() array

// This function generates random tags
// Not needed when fetching from database
function generate_tag() {
$tag_min_length = 5;
$tag_max_length = 30;

$letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for ($a = 0; $a &lt;= rand($tag_min_length,$tag_max_length); $a++) {
       $b = rand(0, strlen($letters) - 1);
       $tag .= $letters[$b];
}
return $tag; 
}

for($i=0; $i&lt;$number_of_tags;$i++){
$tags[$i][0] = generate_tag();
$tags[$i][1] = rand(10,22);     // Font size between 10 and 22, random. Replace with weight from database
}
?&gt;
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;smoketag&lt;/title&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
&lt;style&gt;
    #tag_cloud {
        border: 1px solid #000;
        width: 600px;
        height: 200px;

    }
    .tag {
        background: #ccc;
        border-radius: 4px;
        cursor: pointer;
        float: left;
        margin: 3px;
        padding: 7px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .tag:hover {
        background: #aaa;
    }
    .searchbox {
        cursor: auto;
        width: 300px;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="tag_cloud"&gt;
&lt;input class="tag searchbox" type="textbox"&gt;
&lt;?php
    foreach($tags as $k=&gt;$v){
        echo "&lt;div class='tag alive' id='tag_".$k."' style='font-size:".$v[1]."px;'&gt;".$v[0]."&lt;/div&gt;";
    }
?&gt;
&lt;/div&gt;
&lt;script&gt;
var boundries = new Array();

function checkBoundries(tag_id){
var thisTag = $("#tag_"+tag_id);
var max_top = $("#tag_cloud").outerHeight() - thisTag.outerHeight(true);
var max_left = $("#tag_cloud").outerWidth() - thisTag.outerWidth(true);

// propose new location
var proposedTop = Math.floor(Math.random()*parseInt(max_top));
var proposedLeft = Math.floor(Math.random()*parseInt(max_left));
var top = proposedTop;
var right = proposedLeft + thisTag.outerWidth(true);
var bottom = proposedTop + + thisTag.outerHeight(true);
var left = proposedLeft;
console.log("     "+top+"     ");
console.log(left+"       "+right);
console.log("     "+bottom+"     ");



// check curent tags for conflicts
var fullPass = true;
$(".tag").each(function(x){
    if(tag_id!=x){
        var c_top = parseInt(thisTag.css('top')); // Top
        var c_right = parseInt(thisTag.css('left'))  + thisTag.outerWidth(true);// Right
        var c_bottom = parseInt(thisTag.css('top')) + thisTag.outerHeight(true); // Bottom
        var c_left = parseInt(thisTag.css('left')); // Left
        var passed = true;
        var height_conflict = false;
        var width_conflict = false;
        if(((top&lt;=c_bottom)&amp;&amp;(top&gt;=c_top))||((bottom&lt;=c_bottom)&amp;&amp;(bottom&gt;=c_top))){ var height_conflict = true; }
        if(((right&lt;=c_left)&amp;&amp;(right&gt;=c_right))||((left&gt;=c_left)&amp;&amp;(left&lt;=c_right))){ var width_conflict = true; }
        //console.log(height_conflict + " " + width_conflict);
        if((height_conflict)&amp;&amp;(width_conflict)){ passed = false; }
        console.log(tag_id + ':' + x + " -- " + passed);
        if(passed==false){
            //checkBoundries(tag_id);
            fullPass = false;
            console.log("RESET");
            return false;
        }
    }
});
if(fullPass==true){
    // No conflicts. Move tag to new location
    //thisTag.css('top',Math.floor(Math.random()*parseInt(max_top)));
    //thisTag.css('left',Math.floor(Math.random()*parseInt(max_left)));
    thisTag.css({top: proposedTop+"px"});
    thisTag.css({left: proposedLeft+"px"});
    console.log('moving: ' + tag_id + " --- top: " + top + " --- left: " + left);
    return true;
} else {
    return false;
}
}

$(document).ready(function(){
// Set textbox to center
$(".searchbox").css('top', (parseInt($("#tag_cloud").height())/2) - ($(".searchbox").height()/2)+"px");
$(".searchbox").css('left', (parseInt($("#tag_cloud").width())/2) - ($(".searchbox").width()/2)+"px");

// Start building
for(var i=0;i&lt;7;i++){
    while(checkBoundries(i)==false){
        // do nothing
    }   
}
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I think the issue is with this logic:</p>

<pre><code>if(((top&lt;=c_bottom)&amp;&amp;(top&gt;=c_top))||((bottom&lt;=c_bottom)&amp;&amp;(bottom&gt;=c_top))){ var height_conflict = true; }
if(((right&lt;=c_left)&amp;&amp;(right&gt;=c_right))||((left&gt;=c_left)&amp;&amp;(left&lt;=c_right))){ var width_conflict = true; }
</code></pre>
