Position and size fixed within container

I have a problem. I'm trying to contain the dpad and the buttons within their container while being fixed so that when the user scrolls, it follows the page. It works. However, when the page is resized, it gets screwed up. I have no idea how to fix it. If you have google chrome, you can experiment with the code.

Here's the link:

http://www.kazecompany.com/wp-content/themes/kaze/grid_template2.php

Here's the CSS:

body {
font-family: Verdana, Geneva, sans-serif;
line-height: 150%;
}

a {
color:#000;
text-decoration:none;
}

#bg-overlay {
position: relative;
}

/* HEADER */
#header {
margin-top: 20px;
position: relative;
}

#access {
top: 30%;
background:url(nav.png) center no-repeat;
background-size: 100% auto;
height: 250px;
max-width: 250px;
width: 100%;
position: fixed;
}

#access ul {
list-style-type:none;
text-align:center;
display: block;
}

#access ul a {
display: block;
background:#CCCCCC;
width: 60px;
}

#team, #shop {
margin-left: 38%;
}

#team {
margin-top: 30%;
}

/* CONTENT */

#content {
margin-top: 20px;
}

#content h1 {
font: normal 32px/125% Verdana, Geneva, sans-serif;
}

#content h3 {
font: 90%/130% Arial, Helvetica, sans-serif;
}

/* FOOTER */
#footer {
background:#999;
position: relative;
}

#footer ul {
list-style-type:none;
text-align:center;
display: inline;
}

#footer ul a {
display: block;
background:#CCCCCC;
width: 75px;
}

#google, #top {
margin-left: 35%;
}

#social {
top: 30%;
max-width: 250px;
width: 100%;
background:url(social.png) center no-repeat;
background-size: 100% auto;
height: 250px;
position: fixed;
}

Thank you guys in advance!

im not understanding what the problem is. what do you mean by "screwed up"? what is supposed to happen vs what is happening?

I apologize. I completely forgot to mention the problem. If you resize your browser, the dpad and the button's width and height don't adjust accordingly. it should be that as you resize your browser, the dpad get's smaller, same as the width of the div. but it's not.

bump please? sorry. i really really need some help.

May I ask ? what is the dpad ? I will skip to mention about it for now, seem like you want your button and content resize when browser window resize, in this case you need to config your button's height and width as percent not pixel, to do that you need to add this config into you css for set height as percent.

html, body {height:100%;}