randomise position of elements within container

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.

Bonus points if you can make the child never overlap.

HTML

<div class="container">
    <div class="population_man"></div>
    <div class="population_man"></div>
    <div class="population_man"></div>
</div>

CSS

.container{
    width:200px;
    height:200px;
    border:1px solid grey;
    position:relative;
}

.population_man{
    position:absolute;
    width:5px;
    height:10px;
    background-image:url('http://ift.tt/1k5MFUH');
}

JQUERY

$( 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)
       });        

})
});

jsfiddle: http://ift.tt/1QQtECB