New to css, not expanding properly

[jamesedel]

I am learning css and ran into a problem I can't figure out.

When I add text in my main content div, it does push my footer down like I want it to. However, it keeps the existing space in the div between the content and the footer leaving a large gap at the bottom of the screen. Can anybody help me?

The developing site is here:

<snip>

This is the css code :

@charset "utf-8";

/*-------------------
Style Template
-------------------*/

/*-------------------
HTML Styles
-------------------*/

body {
text-align: center;
margin: 0px;
background-color: #FFF;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
}

/*-------------------
Structural Styles
-------------------*/

#container-content {
position:relative;
margin:0 auto;
height:auto;

width:980px;
height:auto;

text-align:left;
}

#container-page {
position:relative;

width:100%;
height:auto;

text-align:center;
}

#content-container {
position:relative;
top:-17em;

width:100%;
}

#content {
position:relative;
left:13em;
top:-33em;

width:45em;
}

#content-main {
position:relative;

width:100%;
height:auto;
}

#footer {
position:relative;
top:0em;

width:100%;
height:12.6em;
}

.footer {
background-image:url(images/template_footer.jpg);
background-repeat:no-repeat;
}

#intro {
position:relative;
left:20em;
top: -34em;

width:38em;
height:8.8em;
white-space:normal;
}

#logo {
position:relative;
left:50em;
top:-19em;

width:11em;
height:11em;
}

.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}

#photo-main {
position:relative;
left:1em;
top:1em;

width:16em;
height:20em;
}

.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}

/*-------------------
Side Navigation Styles
-------------------*/

#nav-container {
position:relative;
left:1.3em;
top:-12em;

width:12em;
height:19em;
}

.nav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}

.link-nav a {
color: #000;
text-decoration: none;
}

.link-nav a:visited {
color: #000;
text-decoration: none;
}

.link-nav a:hover {
color: #F60;
text-decoration: underline;
}

/*-------------------
Footer Navigation Styles
-------------------*/

#footer-nav{
position:relative;
top:13em;
left:3em;

width:40em;
height:2em;
}

.nav-footer {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}

.link-footer a {
color: #F60;
text-decoration: underline;
}

.link-footer a:visited {
color: #F60;
text-decoration: underline;
}

.link-footer a:hover {
color: #900;
text-decoration: underline;
}

[edited by: limbo at 11:18 am (utc) on Jan. 25, 2010]
[edit reason] No personal URL's please. See TOS. [/edit]

[Some1hulovesanime]

Maybe you have to make top:13em --> 0em in the footer-nav id. (don't know if it helps...)

grtz