Expand page with background

So here is the situation:
I made the 'header & begin content-page' as one background.
I made a footer that will come under this header also with a background that fits nicely.

Then i added content manually with a div and some margin, but of course you want to automatically expand the page so the content fits inside.
But HOW would i accomplish this?

This might make it more understandable:

<div id="content-singlepage"> <!-- This had the first background -->
<div id="page-content">
Content blablbaa
</div>
</div>
<div class="extend"></div> <!-- background for extending between header & footer -->
<div id="footer">.</div><!-- background for footer -->
Css:
#content-singlepage {
background-image:url("images/Header-test.png");
background-repeat:no-repeat;
height:549px;
}

#page-content-container {
max-width:850px;
width:850px;
height:300px;
margin:0 auto;
margin-top:240px;

}

#page-content {
max-width:850px;
width:850px;
text-align: justify;
padding:15px;

}

.extend {
background-image:url("images/extender.png");
background-repeat:repeat-y;
height:100px;
margin-left:95px;
}

#footer {
background-image:url("images/footer.png");
background-repeat:no-repeat;
height:334px;
}

PREVIEW (http://jdejong.org/craftedmovie/singlepage.html)

Hello jasperdj,
The normal behavious of a div element would be to expand to contain whatever you put in it. We would need to see your both your CSS and markup to see why that is not happening.

Hello jasperdj,
The normal behavious of a div element would be to expand to contain whatever you put in it. We would need to see your both your CSS and markup to see why that is not happening.

there you go also visit the preview:
http://jdejong.org/craftedmovie/singlepage.html

Good morning jasperdj,
.extend cannot extend as it is because it has a height of 100px. Remove that height and it will expand to contain what you put in it.

Oops, check that.
You're editing the online version now so that answer doesn't apply.

--Any element that you want to be "infinite expandable" should not have a height set. You can put a min-height to stop it from getting too small though.

i know, thats now the problem. I just use the height for testing purposes.

I want to add text/images within the content area.
But when the content gets ' too big' the page should expand by increasing the height of .expand .
The problem is, if i put the text inside .expand the text will be to low.

Do you have a solution for that :)

#pagecontainer {
margin: 0 auto;
padding-top:0px;
/*height: 100px;*/
width:1250px;
}
#content-singlepage {
background-image:url("images/Header-test.png");
background-repeat:no-repeat;
/*height:549px;*/
}
#page-content-container {
max-width:850px;
width:850px;
/*height:300px;*/
margin:0 auto;
margin-top:240px;

}

I just commented out the heights that were stopping your text from expanding it's container and the ones it's nested in. Your background image does not lend itself well to expanding though.

#pagecontainer {
margin: 0 auto;
padding-top:0px;
/*height: 100px;*/
width:1250px;
}
#content-singlepage {
background-image:url("images/Header-test.png");
background-repeat:no-repeat;
/*height:549px;*/
}
#page-content-container {
max-width:850px;
width:850px;
/*height:300px;*/
margin:0 auto;
margin-top:240px;

}

I just commented out the heights that were stopping your text from expanding it's container and the ones it's nested in. Your background image does not lend itself well to expanding though.

Yea that worked for expanding, but the text should be higher :( Please take a look at: http://jdejong.org/craftedmovie/singlepage.html

Any ideas to make an offset for the text?