I have a table cell that contains 3 div's. 1) Logo 2) Menu (drop down, variable height) 3) Footer links

This table cell is already resizing to the height of my page. What I need to happen is for the Logo and the Menu to vertically align with the top of the Cell and the Footer links to vertically align with the bottom of the Cell (i.e. at the bottom of the page no matter how long it is).

Is this doable and how do I do it? I'm a programmer not a designer and I suck with CSS.


This is the chunk of code I'm talking about:

<td align="left" rowspan="3" style="width: 200px;">
<div id="LeftImagePane" runat="server" visible="false" style="vertical-align:top;"></div>
<br /><br /><!-- this creates space between these 2 containers -->
<div class="SideMenuContainer">
    <!-- Side Menu Code -->
<div style="vertical-align:bottom;" id="FollowUsPane" runat="server"></div>

Like that, all 3 items are aligning vertically centered on the page. If I add valign='top' or valign='bottom' to the td, then all items either align to the top or the bottom respectively.

EDIT 2 If I add position:absolute;bottom:-1px; to "FollowUsPane" (as someone suggested to me) the content of that div seems to align itself to the bottom of something in the middle of the page...it always goes right at that spot no matter how long the page is. However, if I take out this code from my page and make an HTML page with a single table and this code inside it...it works like I would expect it to...so something in my page is throwing it off...but I can't figure out what that would be. Any ideas?

4 answers

This was chosen as the best answer

You can put all the child elements of the table cell into a div, and use position:relative; height:100%; on that div. Use position:absolute; top:0;left:0; for the elements u need on top and position:absolute; bottom:0; left:0; for those you need on the bottom.

Answered almost 8 years ago by Divya Manian

The easy way for you to get this to work is to put the footer in a different table row and then set a min-height of around 670px for the main content area.

Answered almost 8 years ago by Anthony Grace

Don't use tables for layout.

Answered almost 8 years ago by Jacob R
pselus 0

Sadly I MUST use tables for layout on this. The solution came from a coworker with some tweaks from me and honestly, I don't even think he knows exactly how we fixed it. This was an inherited design and we aren't allowed the time to change it right now so with a combination of positioning and rowspan's and new columns we got it working. It's a disgusting fix and I'm not proud to admit it but it works.

Thanks for your help everyone.

p.s. --> The solution had to do with the layout on the rest of the page, not the snippet of code I pasted here and I can't really paste the whole page so none of you could have actually fixed the situation yourself. Thanks anyway.

Answered almost 8 years ago by pselus