Posizionare un div a bottom??

vi spiego un po quello che voglio fare, ho un codice html così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#archNews {
	position: relative;
	padding-bottom: 1px;
}
-->
</style>
</head>

<body>
<table width="300" height="500" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
  <tr>
    <td valign="top"><table width="100%" border="2" cellpadding="0" cellspacing="0" bordercolor="#333333" style="height: 100%;">
        <tr>
          <td valign="top"><table width="100%" height="300" border="2" cellpadding="0" cellspacing="0" bordercolor="#00FF33">
              <tr>
                <td valign="top">Pippo</td>
              </tr>
            </table>
			<div id="archNews">aaa</div>
			</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Questo codice mi produce tre tabelle una dentro l'altra, come in figura.
io vorrei che la scritta aaa che poi andrò a sostituire con un'immagine da cliccare, sia allineata al bordo inferiore nero. Come vedrete dal codice la tabella con il bordo nero deve avere un'altezza del 100% di quella rossa.
Help me!!!