HTML Table Help

[Nathan]

I was torn between posting it in this board or the Code Support board, but I posted it here because it doesn't really apply to my proboard forum.

I will explain my issue as I go.

My CSS snippet:

#table1 {
position:absolute;
left:319px;
top:791px;
width:707px;
height:auto;
background-color:#FFFFD5;
}

#table2 {
position:absolute;
left:0px;
top:823px;
width:1026px;
height:60px;
}

My HTML snippet:

<div id="table1">I want to be able to expand this table as large as I like without it overlapping "table2."
</div>
<div id="table2">
</div>


I want to be able to type what ever I like in table1 and keep it from overlapping table2. If I type too much, and the table reaches table2, table2 will come in the forground blocking table1.

How can I fix this?

[RedBassett]

Don't use position: absolute. Find another way to place the DIVs. Because you are defining the exact location of both 1 and 2, 2 has no way to move down when 1 is longer than expected.

Alternately, you could give 1 a fixed height, and the property:

overflow:scroll;

This would cause it to become a scrolling box, of a fixed size.

[Nathan]

Thanks for the help! I also just thought of this. All these divs are in Table_01. If I made a new table for div name "table2" would it fix this issue as well?