Sub Div's position relative to a parent Div - html

Question

I'd like to have a site that will almost be responsive to a certain degree.
I've made a quick mock up of how I'd want it to look (This is really basic and missing page content but you should get the general idea;
Large: http://i.stack.imgur.com/vX11k.png
I'm sure you've seen sites like this before, but I can't get the coding to work.
I just need the inner div's to position to the parent div and not the page itself.
So far I just can't seem to get it to work.
Main Div:
#site {
width: 1000px;
margin: 0 auto;
position: relative;
}
Email button
.email {
background-image: url(img/topmenu_email.png);
position: absolute;
right: 10px;
top: 0px;
z-index: 83;
}
Here's how it was looking (locking to the side and when I resized browser everything would be overlapping);
http://i.stack.imgur.com/R1cAY.png

Answer 1

From what I can see, there's nothing wrong with your css.
It does behave how it should be.
If your problem is that the email etc not going all the way to the right part of the screen, it's probably because of this
#site {
width: 1000px; //It's saying that the site only have 1000px of width, and not the screen size
margin: 0 auto;
position: relative;
}
.email {
background-image: url(img/topmenu_email.png);
position: absolute;
right: 10px;
top: 0px;
z-index: 83;
}
Keep in mind that an absolute element will go as far as it's relative parent's size, in this case it's width.
Probable solution would be to set
#site {
width: 100%; //Make it full width
margin: 0 auto;
position: relative;
}