Position absolute, top right hand corner (resizing)

Question

Should be really simple... I thought.

I have a set up as such:

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

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.

However, this css isn't working. Any 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;
}

** EDIT **

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.

Answer 1

ID and NAME tokens must begin with a letter, that is why your #1 and #2 styles are not applying, change them to something like #a1 or #a2

UPDATE:
Just add float:right; to your #main div

Working demo