title: Adding multiple div boxes under each other and looping
body: <p>I'm looking to create a rating website however currently I'm struggling to get them to look like so: <a href="http://i.stack.imgur.com/uLmog.png" rel="nofollow">Desired Result</a></p>
  
  <p>Currently I have this problem:</p>
  
  <p><a href="http://i.stack.imgur.com/dkqK2.png" rel="nofollow">Current Position</a></p>
  
  <p>Here is my html/php:</p>
  
  <pre><code>&lt;div id="center"&gt;
  &lt;?php
    for ($i = 0; $i&lt;3; $i++) {
      ?&gt;&lt;div class="floating-box"&gt;No Content&lt;/div&gt;
      &lt;div class="floating-boxsmall"&gt;No Content&lt;/div&gt;
      &lt;?php
    }
  ?&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my relevant CSS:</p>
  
  <pre><code>   #center {
      position: fixed;
      top: 50%;
      left: 30%;
      margin-top: -100px;
      margin-left: -150px;
  }
  
  .floating-box {
      float: left;
      width: 150px;
      height: 75px;
      margin: 10px;
      border: 3px solid #0076be;  
  }
  .floating-boxsmall {
      float: left;
      width: 150px;
      height: 15px;
      margin: 10px;
      border: 3px solid #0076be;  
  }
  </code></pre>
  
  <p>Any Help is greatly appreciated</p>