spread HTML elements randomly over a div using JavaScript
<p>I wish to create something like a virtual forest.</p>

<p>I have:</p>

<ul>
<li>fixed size div, where I wish to spread the trees</li>
<li>Random number of trees (each tree is a PNG)</li>
<li>small square div in the center that should be kept clear of trees</li>
</ul>

<p>How can I spread the trees so they:</p>

<ul>
<li>Wont overlap each other</li>
<li>Wont get into the central div</li>
<li>Calculate their size (css) so all trees will fit into the div</li>
</ul>

<p>Thanks</p>

<p><strong>More info as requested:</strong></p>

<ul>
<li>All the tree images has same dimension</li>
<li>Container div has a fixed dimensions of 500x300 px</li>
<li>Small central div has a fixed dimensions of 30x30 px</li>
<li>The png native resolution is 60x60 px</li>
</ul>

<p>I created the following php script, but it does not handle the empty location nor its accurate in fitting the images into the div:</p>

<pre><code>$forest1 = null;
for ($a=1; $a &lt; 201; $a++) {

    // width * height (500*280)
    $total_area_in_pixels = 140000;
    $total_elements = 200;
    $area_per_object = $total_area_in_pixels / $total_elements;
    $element_height = round (sqrt($area_per_object) / 100 * 70);

    $random_margin = rand(0, $element_height / 5);
    $tree_type = rand(1,4);
    $style = "height: {$element_height}px; margin: {$random_margin}px;";
    $forest1 .= "&lt;img src='images/trees/tree{$tree_type}.png' alt='{$a}' title='tree' style='{$style}'&gt;\n";
}
</code></pre>
