title: Position absolute, top right hand corner (resizing)
body: <p>Should be really simple... I thought.</p>
  
  <p>I have a set up as such:</p>
  
  <pre><code>&lt;div id="main"&gt;
     &lt;div id="a1"&gt;THE FIRST&lt;/div&gt;
     &lt;div id="a2"&gt;THE SECOND&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the entire main div to be positioned at the top right hand corner of my screen and when I resize the browser, I want it to STAY there. I'm not talking fixed positioning - Just absolute.</p>
  
  <p>However, this css isn't working. Any ideas?</p>
  
  <pre><code>#main {
          position:relative;
      top:0;
      right:0;
      z-index:300;
      min-width:0;
      width:8%;
  }
  
  #main #a1 {
      position:absolute;
      background: #082540;
      z-index: 300;
      right:0;
      top:40px;
  }
  
  #main #a2 {
      position:absolute;
      background: #082540;
      z-index: 300;
      right:0;
      top:0;
  }
  </code></pre>
  
  <p>** EDIT **</p>
  
  <p>If I put the div at the top right hand, I want it to disappear (like "fixed") when I bring the browser in from right to left.</p>