title: Positioning a div below its' parent. position: absolute; bottom: 0; not working?
body: <p>Basically I need to make a circle look like it's hanging from a string. I used the basic CSS of:</p>
  
  <pre><code>#string {
      position: relative;
  }
  #circle {
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>And it's putting the circle at the bottom, but not below the "string" It's sitting on the right side of it, but at the bottom. Am I stupid? What am I doing wrong?</p>
  
  <p>EDIT: Full code</p>
  
  <pre><code>&lt;div class="anchor" id="one"&gt;
      &lt;div class="circle" id="one"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  html, body { height: 100%; width: 100%; }
  body {
      font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
      background: #DDD;
      margin: 0;
      padding: 0;
      color: #000;
  }
  .anchor {
      background-color: #000;
          position: relative;
      width: 10px;
  }
  .anchor#one {
      margin-left: 10%;
      height: 500px;
  }
  .circle {
      position: absolute;
      bottom: 0;
      border-radius: 50%;
      background-color: #000;
  }   
  .circle#one {
      width: 200px;
      height: 200px;
  }
  </code></pre>