Posición absoluta, esquina superior derecha (cambio de tamaño)

Question

Debería ser realmente simple ... pensé.

Tengo un conjunto constituido como tal:

<div id="main"> 
    <div id="a1">THE FIRST</div> 
    <div id="a2">THE SECOND</div> 
</div> 

Quiero todo el div principal que se coloca en la esquina superior derecha de la pantalla de mi y cuando puedo cambiar el tamaño del navegador, quiero que se quede allí . No estoy hablando de posicionamiento fijo, solo absoluto.

Sin embargo, este CSS no está funcionando. ¿Algunas ideas?

#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; 
} 

** ** EDITAR

Si pongo el div en la parte superior derecha, quiero que desaparezca (como "fijo"), cuando haga llegar el navegador de derecha a izquierda.

Answer 1

ID y NAME fichas deben comenzar con una letra, es por eso que sus #1 y #2 estilos no están aplicando, las cambian a algo así como #a1 o #a2

ACTUALIZACIÓN:
Sólo añadir float:right; a su #main div

Trabajando demo