title: Position div boxes with css
body: <p>I want to achieve this:</p>
  
  <p><img src="https://i.stack.imgur.com/E9OMI.png" alt="alt text"></p>
  
  <p>I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:</p>
  
  <pre><code>&lt;div class='content'&gt;
     &lt;div class='box'&gt;
         &lt;a&gt;test&lt;/a&gt;
         &lt;div class='money'&gt;&lt;div id='maxnumber'&gt;
             &lt;h3 id='max'&gt;max&lt;/h3&gt;&lt;h3 id='digit'&gt;0000&lt;/h3&gt;
         &lt;/div&gt;&lt;/div&gt;
         &lt;div id='numbereuro'&gt;&lt;h3 id='digit2'&gt;&lt;/h3&gt;
             &lt;h3 id='euro'&gt;&lt;/h3&gt;
         &lt;/div&gt;
     &lt;/div&gt;           
     &lt;div class='utility'&gt;test&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a working example that shows the result without the smaller box: <a href="http://jsfiddle.net/" rel="nofollow noreferrer">http://jsfiddle.net/</a></p>
  
  <p><code>.box</code> names the bigger box and <code>.utility</code> the smaller box below bot wrapped in <code>.content</code>. I use the following css:<a href="http://jsfiddle.net/76fXa/" rel="nofollow noreferrer">http://jsfiddle.net/76fXa/</a></p>
  
  <pre><code>.content {
      margin: 5px;
      padding: 5px;
      font-size: 11px;
      float: left;
  }
  
  .utility{
      position:relative;
      height:50px; width:100px; background:red;
  }
  
  .box {
      margin: 5px;
      padding: 5px;
      background: #BBE3A8;
      font-size: 11px;
      float: left;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  
  .box {
      position: relative;
      padding: 5px;
      width: 180px; height:auto;
      cursor:pointer;
  }
  </code></pre>
  
  <p>and I get the following result: <a href="http://jsfiddle.net/76fXa/1/" rel="nofollow noreferrer">http://jsfiddle.net/76fXa/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/BMypX.png" alt="alt text"></p>
  
  <p>any ideas?</p>