title: css or javascript dynamic positioning
body: <p>I'm trying to set div elements without overlapping and also like this </p>
  
  <p><a href="http://jsfiddle.net/3paFX/" rel="nofollow">Demo</a></p>
  
  <p>is there any way can I do it in css or javascript?
  in this code I actually used margin a lot. I think there better way doing this. Could you help me. </p>
  
  <pre><code>&lt;div class='container'&gt;
          &lt;div class='work1 round'&gt;&lt;/div&gt;
          &lt;div class='work2 round'&gt;&lt;/div&gt;
          &lt;div class='work3 round'&gt;&lt;/div&gt;
          &lt;div class='work4 round'&gt;&lt;/div&gt;
          &lt;div class='work5 round'&gt;&lt;/div&gt;
          &lt;div class='work6 round'&gt;&lt;/div&gt;
          &lt;div class='work7 round'&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .container {
      width: 620px;
      height: 400px;
      margin: 0 auto;
      background: rgba(200,200,200,1);
  }
  
  .round {
      border-radius: 50%;
  }
  
  .work1 {
      width: 80px;
      height: 80px;
      background: #ddd;
      margin: 115px 0 0 270px;
      position: absolute;
  }
  .work2 {
      width: 75px;
      height: 75px;
      background: #ddd;
      margin: 65px 0 0 140px;
      position: absolute;
  }
  .work3 {
      width: 55px;
      height: 55px;
      background: #ddd;
      margin: 65px 0 0 80px;
      position: absolute;
  }
  
  .work4 {
      width: 90px;
      height: 90px;
      background: #ddd;
      margin: 165px 0 0 193px;
      position: absolute;
  }
  
  .work5 {
      width: 77px;
      height: 77px;
      background: #ddd;
      margin: 95px 0 0 213px;
      position: absolute;
  }
  
  .work6 {
      width: 20px;
      height: 20px;
      background: #ddd;
      margin: 148px 0 0 213px;
      position: absolute;
  }
  
  .work7 {
      width: 28px;
      height: 28px;
      background: #ddd;
      margin: 68px 0 0 213px;
      position: absolute;
  }
  </code></pre>