Hello.

I'm trying to achieve something that should be simple but seems not to be, and
please don't suggest I use a frames layout (even though that is close to what
I'm trying to achieve).

What I'm trying to achieve at it most basic is 2 cell table, consisting of top
and bottom cells. The table is to fill the screen and be resizable so..

<table width="100%" style="height:100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>

All straight forward so far, now this is the bit that seems tricky. I wanted
each cell to remain at it's given size on screen (50% height and 100% width in
this case) regardless of what is inside it. So to do this I placed a DIV tag
with some CSS inside the TD cells...

<td>
<div style="height:100%; overflow: auto;">A cell with a DIV in it</div>
</td>

The idea being that the DIV fills the available TD height. And if there is not
enough space for all the content within the td and div tags, the overflow
causes a scrollbar to appear, so you could scroll to view all content. But this
does not work, the content still forces the td tag size and if it's bigger than
the cell, the cell just enlarges instead of remaining the same size and
cropping the content. Is this possible with CSS alone or am I looking at using
javascript to do some resizing?

Any ideas or pointers would be greatly appreciated.

Many thanks,
Meeesta