CSS - COntent layout problem

Hey all,
Well it seems that I can't get the boxes inside my ROSTER-FRAME to stay proportional to the browser window and the only way to play them properly on my webpage is by means of absolute positioning. When I size the window down or up, the media in my css content layout gets all jumbled around. I need to know how I could keep all the content within my ROSTER-FRAME properly proportioned to the browser window. Here,s my code:

-------------------------------------------------------------------
#CONTENT-FRAME {
position: absolute;
top: 143px;
left: 230px;
border-right: 3px solid #C0C0C0;
border-left: 3px solid #C0C0C0;
background-color: #2A2A2A;
width: 65%;
height: 800px;
z-index: 2;
}
#RIGHT-BANNER {
position: absolute;
left: 985px;
top:75px;
width: 100px;
height: autopx;
}
#ROSTER-FRAME {
position: relative;
top: 150px;
margin: 25px 25px 25px 25px;
border: 1px solid #c0c0c0;
width: 100%;
height: auto;
}
#ROSTER-CONTENT {
position: relative;
width: 100%;
height: auto;
}
#ROSTER-HEADER {
position: relative;
border-bottom: 1px solid #c0c0c0;
width: auto;
height: 15px;
background-image: url(../images/sc_roster_header.jpg);
}
#ROSTER-ALIAS {
positiom: absluteo;
width: 150px;
height: auto;
}
#ROSTER-STATUS {
position: absolute;
top: 0px;
left: 151px;
width: 130px;
height: auto;
}
#ROSTER-AGE {
position: absolute;
top: 0px;
left: 282px;
width: 75px;
height: auto;
}
#ROSTER-EMAIL {
position: absolute;
top: 0px;
left: 358px;
width: 160px;
height: auto;
}
#ROSTER-INFO {
position: absolute;
top: 0px;
left: 519px;
width: 160px;
height: auto;
}
-----------------------------------------------------------------
<div id="CONTENT-FRAME">
<div align="center">
<div id="ROSTER-FRAME">
<div id="ROSTER-HEADER">
<div align="left">
<div id="ROSTER-ALIAS" align="left">
<font color="#000000"><b>
Alias
</div>
<div id="ROSTER-STATUS" align="left">
Status
</div>
<div id="ROSTER-AGE" align="left">
Age
</div>
<div id="ROSTER-EMAIL" align="left">
E-Mail
</div>
<div id="ROSTER-INFO" align="right">
More Info&nbsp;</b></font>
</div>
</div>
</div>
<div id="ROSTER-CONTENT">
<div align="left">
<div id="ROSTER-ALIAS" align="left">
<font color="#b5b5b5">
&nbsp;<b>squim<br>
&nbsp;mattmac<br>
&nbsp;postal<br>
&nbsp;h3ddrush<br>
&nbsp;f1ux<br>
&nbsp;ryknow<br>
&nbsp;chu<br>
&nbsp;mawg<br>
&nbsp;sorbo<br></b>
</div>
</div>
<div id="ROSTER-STATUS" align="left">
<b>Leader/Founder<br>
Co-Founder<br>
Co-Leader<br>
Clan-Affairs<br>
Member/Webmaster<br>
Member<br>
Member<br>
Member<br>
Member<br></b>
</div>
<div id="ROSTER-AGE" align="left">
<b>18<br>
17<br>
16<br>
17<br>
17<br>
17<br>
16<br>
17<br>
17<br></b>
</div>
<div id="ROSTER-EMAIL" align="left">
<b><a href="mailtounkassluke@shaw.ca" class="menu">punkassluke@shaw.ca</a><br>
<a href="mailto:mattmacdermott@hotmail.com" class="menu">mattmacdermott@hotmail.com</a><br>
<a href="mailto:calder_r@hotmail.com" class="menu">calder_r@hotmail.com</a><br>
<a href="mailto:h3ddrush@hotmail.com" class="menu">h3ddrush@hotmail.com</a><br>
<a href="mailto:f1ux@shaw.ca" class="menu">f1ux@shaw.ca</a><br>
<a href="mailto:saprykin@shaw.ca" class="menu">saprykin@shaw.ca</a><br>
<a href="mailto:landona@hotmail.com" class="menu">landona@hotmail.com</a><br>
<a href="mailto:unk_420@hotmail.com" class="menu">unk_420@hotmail.com</a><br>
<a href="mailto:"" class="menu">---</a><br></b>
</div>
-------------------------------------------------------------

Thanks in advance,

-Andy