title: How do I position a div to upper left of page?
body: <p>I am struggling with a CSS issue. I have a simple front page that consists of 4 divs. 3 of which are visible. The other is an overlay. </p>
  
  <pre><code>&lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div id="header"&gt;Header&lt;/div&gt;
  &lt;div id="overlay" visible="false"&gt;&lt;/div&gt;
  &lt;div id="container"&gt;Container&lt;/div&gt;
  &lt;div id="menu"&gt;
   &lt;input type="text" /&gt;
   &lt;input type="button" class="button" value="Go" onclick="ajax.getData()" /&gt;        
  &lt;/div&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p>I want the the "menu" to be positioned to the left of the header. I have been able to accomplish this by setting this div's position absolute:</p>
  
  <pre><code> #menu
  {
      position: absolute;
      top: 20px;
      left: 10px;
      width: 150px;
      height: 300px;
      padding: 5px;
      border: solid 1px #666;
      background: #ffffff;
      -moz-border-radius: 5px;
  }
  </code></pre>
  
  <p>However, when the screen is resized (smaller) this div remains locked in position but the other divs resize (desired) but the menu div does not. Changing the positioning to be 'relative' causes the div to fall beneath the 'container' div. Can someone tell me what's wrong with my CSS?</p>
  
  <p>The results are the same in IE and FF.</p>
  
  <p>Thanks!</p>
  
  <p>-Nick</p>