title: CSS positioning: bottom of box right on top of box with hidden overflow
body: <p>OK I have this in the HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="help_box"&gt;some text&lt;/div&gt;
      &lt;div id="unique_title"&gt;Some Title&lt;div class="help"&gt;?&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also have a JS that when the mouse hovers over the <strong>"?"</strong>, the <strong>"help_box"</strong> becomes visible. What I want is to put the very bottom of the <strong>"help_box"</strong> right on top of the <strong>"wrapper"</strong> div. <strong>I cannot write the "help_box" outside the wrapper. It must stay inside the "wrapper".</strong></p>
  
  <p>Here is the CSS for the <strong>"wrapper"</strong> and the <strong>"help_box"</strong>:</p>
  
  <pre><code>.help_box {
      position: absolute;
      padding: 6px 5px;
      top: -30px;
      display: none;
      right: 5px;
      border-radius: 5px;
      color: rgb(51, 34, 170);
      border: 1px solid rgb(15, 27, 160);
      background-color: rgb(255, 255, 255);
      font-size: 12px;
      vertical-align: bottom;
  }
  
  
  .wrapper {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      background-color: #F9F9F9;
      border: 1px solid #D6D6D6;
      border-radius: 6px;
      font-size: 15px;
      margin: 0 0 20px;
      padding: 5px;
      float: none !important;
      width: auto !important;
      text-align: justify;
      position: relative;
  }
  </code></pre>
  
  <p>Some <strong>"help_box"</strong> es have different heights. So although the box goes on top and looks beautiful within one line, it overlaps inside the <strong>"wrapper"</strong> if it has 2+ lines. So in my CSS, the <strong>"top"</strong> declaration is controlling only the top of my <strong>"help_box"</strong> div. How can I control the BOTTOM of this div?</p>
  
  <p>I tried instead of <strong>"top: -30px"</strong>, I used: <strong>"bottom: +200px"</strong> but then the <strong>"wrapper"</strong> div is also varied in size.</p>