Top-Abstand relativ

[Print]

Hallo,

ich möchte mit CSS meine Navigation aufbauen.

Momentan sieht es so aus:

html Seite (interessanter Teil):

<div class="leftnavigation"></div>  
  
  
<div class="headernavigation"></div>  
<div class="maincontent">  
Hier kommt der Text<br /><br /><br /<br /<br />a  
</div>  
  
<div class="bottom"></div>

Der CSS-Code sieht folgendermaßen aus:

div.leftnavigation  
  {  
  background-image:url(images/navigation/left.jpg);  
  height:1036px;  
  width:234px;  
  float:left  
  }  
  
  
div.headernavigation  
  {  
  background-image:url(images/navigation/head.jpg);  
  height:495px;  
  width:666px;  
  left:234px;  
  position:absolute;  
  
  }  
  
  
div.maincontent  
  {  
  top:495px;  
  left:234px;  
  position:absolute;  
  width:666px;  
  background-image:url(images/navigation/mainbg.jpg);  
  background-repeat:repeat-y;  
  }  
  
  
div.bottom  
  {  
  left:234px;  
  position:absolute;  
  width:666px;  
  height:343px;  
  background-image:url(images/navigation/bottom.jpg);  
  } 

Das Problem ist: ich schaff es nicht, dem Bottom-Element einen zum maincontent-Element relativen Wert zuzuweisen.
Das bedeutet, dass es sich einfach an der festgelegten Stelle (im Bsp ganz oben) über das maincontent-Element drüberlegt
Wenn ich "top" in px oder % angeb, bezieht sich das immer auf die komplette Seite und nicht auf den Abstand zu div.maincontent.

Wie kann ich es machen, dass es immer exakt untendran auftaucht, egal wie lange div.maincontent ist?

Greets Print