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> <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='bottom' to the td, then all items either align to the top or the bottom respectively.
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.
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.
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.
Don't use tables for layout.
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.