div problem i css

Mit problem er med følgende layout i css med div tags:

sitet so far: http://www.3dz.dk/misc/template.html
div layout: http://www.3dz.dk/misc/images/layout.jpg

#wrapper div: er 500px i højden for at få baggrundsbilledet med (togskinner)
  #navwrapper div: er 100% i højden
    #nav div: har ikke nogen højde diffineret
    #verticalline div: er sat til 100% i højden (for at den lodrette streg er gennemgående som man kan se i template.html)
  #content div: er sat til 100% i højden

Hvordan kan jeg få indholdet (bla bla tekst der er sat ind) til at gøre afstanden ned til footeren større så den ikke gør som man kan se?
Samtidig skal den lodrette streg hele tiden fylde afstanden mellem toppen og footer.

Har også prøvet at fjerne alle højde angivelser.

Hvis man kan lave det med en scrollbar i #content div kan det måske løse problemet. Men ved ikke om det er smart.

Her kan i se hele css:
#bg
{
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff url('images/bg.gif') repeat-x;
    width: 100%;
    height: 818px;
    z-index: 1;
}

#container
{
    margin-left: auto ;
    margin-right: auto ;
    width: 900px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    border-style: solid;
    border-color: #beb099;
    border-width: 1px;
    background-color: #f9f9f7;
}

#top
{
    width: 900px;
    height: 112px;
    background: url('images/topbg.jpg') no-repeat;
}

#topnav
{
    width: 900px;
    height: 31px;
    background: url('images/topnav.jpg') no-repeat;
}

#topnavleft
{
    float: left;
    width: 340px;
    height: 31px;
}

#topnavright
{
    float: right;
    width: 560px;
    height: 31px;
}

#wrapper
{
    width: 900px;
    height: 500px;
    background: url('images/mainbg.jpg') no-repeat;
}

#navwrapper
{
    float: left;
    width: 246px;
    height: 100%;
}

#nav
{
    float: left;
    width: 245px;

/*    border-right-style: solid;
    border-right-color: #beb099;
    border-right-width: 1px;*/
}

#verticalline
{
    float: right;
    width: 1px;
    height: 100%;
    background: url('images/dot.gif') repeat-y;
}

#content
{
    float: right;
    width: 654px;
    height: 100%;
}

#footer
{
    width: 900px;
    height: 65px;
    border-top-style: solid;
    border-top-color: #beb099;
    border-top-width: 1px;
    text-align: right;
}

Håber det giver mening og at I kan hjælpe mig. =)

/Snig