Cell won't stay up top

Using CSS to keep contents up top of a cell

[ofie2]

My table:

Column 1 / Row 1 = MENU - 2 Rows High with some hidden content that displays more when a graphic is clicked. (Javascript and DIVs)

Column 2 / Row 1 = TITLE (small graphic) [58px]
Column 2 / Row 2 = PAGE CONTENT - some content like text and graphics

My problem is I can't keep Column 2 / Row 1 (TITLE) to keep it's height of 58 px and Column 2 / Row 2 (PAGE CONTENT) to stay at the top of its cell when the Column 1 / Row 1 grows taller if a menu option is clicked.

I tried forcing height of Column 2 / Row 1 to 58px and Column 2 / Row 2 to 100% using both HTML and CSS. But unless the content in Column 1 / Row 2 is bigger than Column 1 / Row 1 it all drops lower on the page as Column 1 / Row 1 gets bigger.

Any idea on how I can force the right side of the table to behave besides beating it with a wet noodle?

Thanks,

Ofie

[CSS_Kidd]

Does column 1 have a rowspan of 2? I know you you said it was two rows high, but it is unclear as to if you are just telling us it is supposed to be 2 rows high or if you declared it in your HTML.

Please post your HTML and your css so that we may see the cause of this issue.

[ofie2]

Thanks so much for the quick response! Sorry about that. Yeah, Column 1 is set as Rowspan="2"

The HTML is extensive and is actually a large php file. However, here's the basics:

<table name="tbl_body" align="center" width="770" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="left" valign="top" rowspan="2">
<!-- left menu here -->
$menu
<!-- end left menu -->
</td>
<td align="left" valign="top" class="bodytitle"><img src="images/subtitles/$title_graphic" width="380" height="58" />
</td>
</tr>
<tr>
<td align="left" valign="top" class="bodycell"><!-- begin page content here -->Blah, Blah, Blah
</td>
</tr>
</table>

--------------------
---- CSS HERE ------
--------------------
.bodycell {
vertical-align: top;
height: 100%;
}
.bodytitle {
vertical-align: top;
height: 58px;
}