div erzeugen, das ganzen restlichen Platz nutzt

[xilef]

Hallo,

ich habe eine normales Layout mit Header und Content Bereichen. Diese haben insgesamt die Höhe von 692px. Einzubauen ist ein dritter Bereich, der ein teilweise transparentes Bild enthält in in den Content-Bereich hineinragen soll. Es soll bei x: 400px und etwas rechts der horizontalen Mitte anfangen. Das habe ich alles noch hin bekommen. Jetzt das Problem: Dieses Bild muss nicht ganz zu sehen sein, es soll lediglich den Platz nutzen, der von der angegebenen Start-Position noch nach rechts und unten frei ist, so dass keine Scrollbars im Browser angezeigt werden.

Hier mal meine css-Datei (#king ist das Problemkind ;) ):

@CHARSET "ISO-8859-1";

html{
   height: 100%;
   margin: 0px;
}

body{
   height: 100%;
   widht: 100%;
   margin: 0px;

background-image: url(../img/background.png);
   background-repeat: repeat;
}

#header{
   width: 812px;
   height: 158px;

position: relative;
   left: 50%;
   margin-left: -406px;

background-image: url(../img/banner.png);
   background-repeat: no-repeat;
   background-position: center top;
}

#content{
   width: 738px;
   height: 534px;

position: relative;

left: 50%;
   margin-left: -369px;

background-image: url(../img/paper.png);
   background-repeat: no-repeat;
   background-position: center top;
}

#king{
   width: 100%;
   height: 100%;

position: relative;
   top: -290px;
   left: 50%;
   margin-left: 60px;

background-image: url(../img/king.png);
   background-repeat: no-repeat;
   background-position: left top;
}

Grüße,
xilef