HTML - Scrolls To Below Div

I'm having some trouble with the two scrolls. How do I align them to match up to the picture?

This is my code:
HTML Code:

<table border="0" cellpadding="0" cellspacing="0" width="700" height="700" background="http://img255.imageshack.us/img255/220/noridfg4.jpg">
<tr>
<td width="36"></td>
<td width="354" valign="bottom">

<div style="overflow: auto; height: 398px; width: 290px; padding: 0px; border: 1px black solid">

</div>

</td>

<td valign="bottom">

<div style="overflow: auto; height: 292px; width: 220px; padding: 0px; border: 1px black solid; margin-left: auto;">

Write text here

</div>

</td></tr><tr>

<td height="80"></td>
<td></td><td></td></tr></td></tr></table>

i have an html form that uses javascript to calculate the total price of gift cards. when i use a button for submit, everything is peachy. when i use an image to submit, the form races to the top and shows the top line of the page.

the text is enclosed within a div tag that has a set height with auto as the overflow command. i removed the height and overflow, thinking that the enclosure was causing this. nope! same thing happened.

this is the submit code:

<input type="image" src="images/buttons_contact_calculate.gif" onclick="calcard(this.form)"><input type="text" name="totalprice" size="8"><br><input type="image" src="images/buttons_contact_reset.gif" name="reset" />

the javascript code is this:

function calcard(form) {
$totalprice = 0;

if(form.card_twentyfive.checked==true){
twentyfive = (25 * form.twentyfive_no.value);
}
else {
var twentyfive = 0;
}

form.totalprice.value = twentyfive + fifty + seventyfive + onehundred + twohundred + ".00";
}

As indicated in the last line, there are five if statements including the twentyfive statement shown here for an example.

the css is this:

.text_box {
position: absolute;
top: 280px;
left: 0px;
width: 100%;
z-index: 15;
}

.text {
position: relative;
left: 0px;
top: 0px;
width: 473px;
height: 406px;
overflow: auto;
padding: 0px 30px 0px 503px;
font-size: 13px;
font-family: "arial";
font-weight: normal;
line-height: 150%;
letter-spacing: 0px;
text-align: justify;
color: #FFFFFF;
z-index: 5;
}

any ideas about what is going on?

My page scrolls and it shouldn't! Any ideas...? or can I not see the wood for the trees?

Link

Hello everyone! I've got a pretty strange problem. I have a div with overflow: hidden and it works fine in all the browsers except Safari. In Safari, if you have a Macbook, you can scroll the contain of the div using two fingers. However, there is no problem like this on the iTunes site. Here is my code:
HTML Code:

<div style="width: 480px; height: 320px; overflow: hidden; position: relative">
    <img src="http://new.yogamen.net/uploads/games/crazy/1.png" style="float: left" />
    <img src="http://new.yogamen.net/uploads/games/crazy/2.png" style="float: left" />
    <img src="http://new.yogamen.net/uploads/games/crazy/3.png" style="float: left" />
    <img src="http://new.yogamen.net/uploads/games/crazy/4.png" style="float: left" />
 </div>

I have a web page that has a banner at the top.
It is in a div.
the main part of my page is also in a div.

Using the Z-index parameters and the position parameters
on each div, I have the main part of the page scroll underneath
the banner.

I have a link at the top of the page,
<a href="#mondaymtgs">Meetings on Monday</a>
Which points to a name anchor on the page.

When the link is clicked, it goes to (or scrolls to)
The named anchor:

<a name="mondaymtgs">Meetings that are on Monday.</a>

The problem is this, when it does scroll to the named anchor,
It does it such that, the named anchor is at the top of the page,
Underneath the banner.

I suppose I could just keep moving the named anchor up a little
at a time, each time when I move it up, testing the link to see if the
page scrolls such that, the point I want I to scroll to
appears just below the banner.

I am going to have numerous links at the top of the page, pointing
To various places on the page.
I hate to have to do this for each link.

I would rather just put the named anchor where I want it to page
to, and have that line show just under the banner.

Is there any way to do this?

Thanks in advance.

Laurence