title: randomise position of elements within container
body: <p>I am trying to randomly position multiple child elements within a parent container using jquery/javascript. This is the code that I have at the moment. Any help or ideas would be great. </p>
  
  <p><strong>Bonus points</strong> if you can make the child never overlap.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="population_man"&gt;&lt;/div&gt;
      &lt;div class="population_man"&gt;&lt;/div&gt;
      &lt;div class="population_man"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container{
      width:200px;
      height:200px;
      border:1px solid grey;
      position:relative;
  }
  
  .population_man{
      position:absolute;
      width:5px;
      height:10px;
      background-image:url('http://www.perthurbanist.com/wp-content/uploads/2015/12/Untitled-2.png');
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$( document ).ready(function() {
  $('.population_man').each(function(){
      $holder = $(this).parent();
      $divWidth = $holder.width();
      $divHeight = $holder.height();
  
         $(this).css({
              left: Math.floor(Math.random() * $divWidth),
              top: Math.floor(Math.random() * $divHeight)
         });        
  
  })
  });
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/zL97snxL/21/" rel="nofollow">https://jsfiddle.net/zL97snxL/21/</a></p>