Aligning tables at the top of a page

[SeK612]

Whilst working with tables I'm finding that I cannot align them at the top of a page causing a weird look when two tables are placed side by side, with one being higher than the other.

The problem revolves around the fact that the two tables are different sizes (one holds a menu, the other the main content). As one increases in size it streches a page downwards causing the other table to shift down so it's in the middle of the page.

The work around I was using is to shove an invisable cell at the base of the smaller table and resize that to try to force the small table to the top.

I feel there must be a better way of going about this (even if I can't see it). The other reason I'm nervous about this is I'm not sure the pages will render the same as they are for me, especially since, on some of the later page, I'm getting a different alignment when viewing in my editor, IE and Firefox :(

Images for the last point:

<Sorry, no example URLs.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 5:09 pm (utc) on April 24, 2005]

[tedster]

Are these two side by side tables, or table cells? If they are tables, what keeps them side by side?

[SeK612]

They're two separate tables, but they're within two "holding" cells of a bigger main table (allowing a border that stretches to the length of the largest table around each of the two holding cells to add to the design of the page).

So when one table increases vertically it increase the vertical size of the two holding cells causing the other table to move.

This increase of both holding cells is fine, it's simply the fact that the two tables (with the smaller of the two shifting down so it’s in the middle of it’s holding cell) are knocked out of alignment when it happens and it seems hard to get them back.

[Span]

Any reason you can't use valign="top" in the cells those tables are in?

[SeK612]

None whatsoever and that seems to be exactly what I need. Thanks :)