title: CSS "Suggestions search box" out of position
body: <p>I have created a search feature for a site and in addition I made a "suggestions box" that drops down based on what they are typing. (Like Google does!)</p>
  
  <p>So my issue is, the box floats out of position depending on the window size. How do I fix it to the bottom of the search field?</p>
  
  <p>Live example found here: <a href="http://swissinstruments.com/searchresults.php" rel="nofollow noreferrer">http://swissinstruments.com/searchresults.php</a> (see top search field, type "a" or "c" to get some suggestions coming down.</p>
  
  <p>Now for some code of what I am using:</p>
  
  <p>The Suggestions Box STYLE</p>
  
  <pre><code>.suggestion_list
  {
  z-index:500;
  background: white;
  border: 1px solid #80B6E1;
  padding: 4px;
  float:none;
  margin-top:5px;
  width:191px;
  position:fixed;
  }
  
  .suggestion_list ul
  {
  padding: 0;
  margin: 0;
  list-style-type: none;
  }
  
  .suggestion_list a
  {
  text-decoration: none;
  color: navy;
  }
  
  .suggestion_list .selected
  {
  background: navy;
  color: white;
  }
  
  .suggestion_list .selected a
  {
  color: white;
  }
  
  #autosuggest
  {
  display: none;
  }
  
  The SEARCH BOX Style
  #search-form { float:right; padding:9px 0 0 0;}
  #search-form fieldset {
  border:none;
  border:1px solid #0f58a2;
  border-top:none;
  background:#126dbe;
  padding:0 12px 10px 13px;
   float:right
  }
  #search-form input.text { width:190px; border:1px solid #d0e0e6; margin-right:3px;     padding:2px 2px 3px 7px;}
  #search-form input.submit { background:#007cff; width:59px; text-align:center;     height:23px; line-height:23px; color:#fff; font-size:.77em; text-transform:uppercase;   border:none; cursor:pointer;}
  </code></pre>
  
  <p>Finally the JavaScript part that is used to position the div.  I have set the x to -164 since it seems to work for the resolution used by most users. But as soon as I shrink or stretch it the box is out of position.</p>
  
  <pre><code>/********************************************************
  Position the dropdown div below the input text field.
  ********************************************************/
  this.positionDiv = function()
  {
      var el = this.elem;
      var x = -164;
      var y = el.offsetHeight;
  
      //Walk up the DOM and add up all of the offset positions.
      while (el.offsetParent &amp;&amp; el.tagName.toUpperCase() != 'BODY')
      {
          x += el.offsetLeft;
          y += el.offsetTop;
          el = el.offsetParent;
      }
  
      x += el.offsetLeft;
      y += el.offsetTop;
  
      this.div.style.left = x + 'px';
      this.div.style.top = y + 'px';
  };
  </code></pre>
  
  <p>Is there any way to use percentages rather than px?</p>