Html alignment issue

[ForestTech]

Ok, basically the issue that I'm having is this:

I have a left-aligned navigation bar and I'm trying to keep the navigation menu aligned to the top of the "sidebar" and have a logo image aligned to the bottom of the same sidebar. But I need to make it in such a way that when more text etc is added to the page and the height of the sidebar is increased, the menu stays at the top and the logo stays at the bottom.

At the moment I have this code:

<td style="background:url(images/sideshim.gif)" width="124" valign="top">
<!--- Navbar Start -->
            <table cellpadding="5" cellspacing="0">
                <tr>
                    <td>
                        <a href="main.htm" class="menu">HOME</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="cranes.htm" class="menu">OUR CRANES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="main.htm" class="menu">CRANE DATABASE</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="main.htm" class="menu">BRANCHES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="main.htm" class="menu">CONTACT</a>
                    </td>
                </tr>
            </table>
            <img src="images/sidebarsarens.gif" alt="" height="127" width="124" align="bottom" />
<!--- Navbar End -->
      </td>

I have a draft up at www.universalcranes.com/draft if it helps understand what I mean. I know it's something fairly simple that I've come across before, but I can't for the life of me remember how to fix it.

Any help would be greatly appreciated
ForestTech

[MattEvans]

put the "image" in another table row, at the same cell (column) position of the navigation bar. set the vertical-align of that cell to "bottom" either by CSS or an inline style (i.e. "vertical-align:bottom;"). Adjust colspan and rowspan in other cells accordingly.

Alternatevely; set the image style to "position:absolute;bottom:0px;", and it should always stick to the bottom of the document.... You'd probably then want to replace the image with a placeholder <div> element, at the same height of the picture, or the image will cover up the bottom of your navigation bar when the content on the page isn't vertically lengthly.

[ForestTech]

Ok, I've managed to make it work using a table where the top cell is Vertically aligned to the top of the section and the bottom cell is bottom aligned.

However it only works in Firefox and doesn't work in IE 6 or 7.

Do I need to use the Internet Explorer proprietry tags such as valign=""?
I would assume that just using CSS would do the trick. If anyone has any ideas, that would be awesome.

[MattEvans]

that should definately work in IE 6+... what's the problem exactly? is the page in your link the updated one? if it is i can report it's not working in Opera either...

are you sure the cell has vertical align set to bottom? different browsers have a different idea of how to divide up "unclaimed space" in tables, especially when you use abnormal tables (i.e. tables with cells that span across rows)... however, if you use vertical-align:bottom; that shouldn't be an issue o_O

[ForestTech]

Basically it's layed out in such a way that the heading picture/logo and the bottom "bar" are separate from the content.
The content area is a table with two columns with one cell each. One for the navigation bar and one for the content itself.
Within the cell for the navigation bar is another table, which is divided into two rows. The table height is 100% so that it fills the whole cell that it sits in. The top row is vertically aligned to the top (in the <td> tag) and the bottom row is vertically aligned to the bottom in the same way.

I had a test in netscape and opera yesterday and netscape worked, but opera didn't. It seems like it depends on which rendering engine each browser uses. But I'm stumped as to why the way I currently have it setup doesn't work.