Here's the scoop. I've been working on character biographies for my website, and there is a certain space area that I would like to have the actual text biography in. However, the bios can be quite lengthly, and of course there is no way it's going to fit in that area. So I need something that scrolls.

I've been using DIVs with absoloute positioning, and it works wonderfully....unless you're using something other then a 1024x768 screen. Then the beautiful little box stays in the right position...but the background and layout scoot over. Quite annoying.

So...would anyone like to tell me how I can do this? All I need is a text box that scrolls, I promise. I don't care if it's a div or just a code or whatever. I thought about using iframes but I don't want to have to link to an outside page; with 40+ pages, that's going to be an insane amount of files.

Here's an example of what I need:
http://www.spareoom.net/characterbios/aravis.php

And here is the code I am currently using.
<? include("http://www.spareoom.net/include.php") ?>
<table border="0" cellpadding="10" width="700" height="300" align="center"><tr>
<td valign="top">
<center><big><big><big><b>Aravis Tarkheena</b></big></big></big></center>
<p>
<br>
<div id=layer1 style="position:absolute; top:390; left:138; width:370; height:434; z-index:1; padding:5px; border: #000000 0px solid; overflow:auto;">
TEXT EDITED OUT
</div>
</td>
<td width="320">
<center>
<img src="images/aravis.jpg" width="300" height="480" alt="Aravis">
</center>
</td>
</table>
<table border="0" width="700" cellpadding="5" align="center">
<tr><td>
<center><big><b>Various Portrayals:</b></big></center>
</td>
<td><center><big><b>Quick Facts</b></big></center>
</td>
</tr>
<tr><td width="340">
<img src="images/fotfhhb.gif" width="90" height="90" alt="Image" align="left">
<b><a href="http://www.radiotheatre.org/" target="_new">Focus on the Family Radio Theatre</a></b><br>
<b>Voiced by:</b> Jody Peach<br>
<b>Year made:</b> 1998<br>
<b>Produced by:</b> Focus on the Family<br>
<b>Dramas appeared in:</b> HHB<br>
<br clear="all">
</td>
<td width="325" rowspan=4 valign="top">
<center>
<div style="text-align: left;">
<b>Full Name</b> Aravis Tarkheena<br>
<b>Books featured in:</b> HHB<br>
<b>Aliases/Nicknames:</b> Tarkheena<br>
<b>Race:</b> Human; Calormen<br>
<b>Age:</b> 13<br>
<b>Year of birth:</b> 1001 NT<br>
<b>Year of death:</b> Unknown<br>
<b>Hair color:</b> Black<br>
<b>Eye color:</b> Brown<br>
<b>Parents:</b> Kidrash Tarkaan<br>
<b>Siblings:</b> Two brothers<br>
<b>Spouse:</b> Shasta, a.k.a King Cor<br>
<b>Children:</b> King Ram the Great<br>
<p>
</div>
</center>
</td>
</tr>
</table>
<p>
<br>
<? include("http://www.spareoom.net/characterbios/castbiosinclude.php") ?>
<p>
<br>

Your help is SO appreciated! Thanks! :)

I could be wrong.. but I think no matter what, you'll have this problem if you need it to be positioned -exactly-.

You could try using percentages to position it, I think they would allow it to be positioned correctly in a range of screen sizes.. but you probably wouldn't get it -exactly- in the same spot as it is now.

Sorry I couldn't help much, someone else will probably be able to help you a little more. =)

Hmm. Well, is there any other way to go about this? Like I said, all I need is to have the text area scroll instead of overflowing out of the specified area. I know there's got to be a better way to do this...