vertical align or valign not working

can't align content to top of table cell

[MChild]

I have a table (just one layout table) with a sidebar (2 cells) and a content cell.
So the code is basically like this:
<table>
<tr>
<td class="nav" valign="top">
navlist
</td>
<td id="content" rowspan="2" valign="top">
content
</td>
</tr>
<tr>
<td id="options" valign="top">
text
<div>styleswitcher buttons</div>
</td>
</tr>
</table>
If the content cell is bigger than the content of the 2 cells in the sidebar, the content of the bottom sidebar cell will not align to the top of the cell, it stays at the vertical center of the content of the content cell. I've also tried using vertical-align in the css but it doesn't work either. The content in the bottom sidebar cell is some text followed by a div. I can get the div to sit where I want relative to the text but I can't control the height of the top sidebar cell.
The top cell in the sidebar has a class of nav, and its style is: vertical-align: top; margin: 0px; padding: 0px;
The bottom cell has an id of options and it has this style:
td#options {
vertical-align: top;
}
td#options * {
position: relative;
top: 5px;
}
The second style definition only affects the space between the text and the div inside the cell.
both of the cells in the sidebar have valign = "top" in the html.
What is the relative position relative to, anyway?
I think there must be something adding space under the list in the top sidebar cell, but I can't see anything.
I think my problem is the same as the problem posted by Tricky_9999 on May 26 and I think I've tried the solutions posted (vertical-align in css and valign in html) and it's still not working. I also tried position: relative; top: 5px; and that didn't help either.

[IanKelley]

First fix your table... In the first row you have 2 cells while in the second you have only 1. The cell in the second row should be colspan="2".

I don't see anything that would stop the valign from working. In fact if you make a test using just the outline code you have posted here I suspect it will work fine.

[MChild]

The second cell in the first row has rowspan=2, so the content cell spans the 2 rows of the sidebar.
I've set the border to 1 so I can see what's happening better
Actually the bottom cell is aligned to the top, the real problem is that the first cell of the sidebar has a lot of blank space under the list, even though there is no padding, margin, or anything else under the list. So the bottom cell of the sidebar is only the height of its own content, and the top cell stretches to take up the rest of the height so that the two cells together are the same height as the content cell.
What I want to do is get rid of that blank space after the list.

_____________________________ 
sidebar¦content 
cell 1.¦content 
list...¦content 
list...¦content 
blank..¦content 
space..¦content 
_______¦content 
sidebar¦content 
cell2..¦content 
______________________________ 

[IanKelley]

Sorry, I missed the rowspan.

I can't think of any reliable way to solve your problem using 2 cells in the sidebar. You're always going to get white space at the bottom of one or both cells if the main content cell is larger.

You might try using just 1 cell in the sidebar and separating the content using CSS or a gif.

[MChild]

Yes, I'll give that a try.
Thanks
Maren

[MChild]

OK - I merged the cells and used css to put space between the divs and it works. Wish I knew why I couldn't do it with the 2 cells, though.
Thanks a lot
Maren