[thelist] Aligning tables at the bottom

[Sam-I-Am]

Brad Miller wrote:
> 
> Hey all,
> I have always struggled with aligning a table row or image at the bottom of
> a page dynamically.
> So when you resize the window you still have a certain pixel height at the
> very bottom.
> 
> Anyway can someone give me a little help on how to do this?
> And what kind of compatibility issues do you run into when doing this?
> Are there browsers that don't recognize the height attribute?

quick answer: yes. Netscape 6 for one (see below). Height was never a
valid attribute for tables so support (at all) has been at the
discretion of the browser makers. To get stuff align to the bottom, you
need to use % heights. (i.e <table height="100%"><tr height="100%"
valign="bottom"><td>your bottom aligned stuff here</td></tr></table>)
 Which should work fine (including NN6). But it you (presumably) want
other stuff on the page to valign top you're screwed. In NN4/IE4+ you
can mix % and px heights so:
<table cellpadding="0" cellspacing="0" border="1" width="100"
height="100%">
	<tr valign="top" height="20">
		<td>top aligned content</td>
	</tr>
	<tr valign="bottom" height="100%">
		<td>bottom aligned content</td>
	</tr>
</table>
but the same in NN6 will give you a table 100% tall, plus 20px, so it'll
push of the screen and force a scrollbar. Maybe that's ok for your
purposes??

Maybe others have had more luck than me. I have managed to do it by
dynamically assigning row heights based on the available height
(document.body.clientHeight or window.innerHeight) but that's a little
clunky. 

hth
Sam