Nested Div Heights

Help nesting Divs

[jonnypop]

I have a page that is dynamically generating content within a DIV. Some of the content needs to stay towards the top, some in the middle, and some at the bottom. The container DIV should always be the same size.

I'll try and illustrate

------------<div id="body">-----------------

<div style="position:relative;top:1%">Item 1</div>
<div style="position:relative;top:1%">Item 2</div>

<div style="position:relative;top:50%">Item 3</div>
<div style="position:relative;top:50%">Item 4</div>

<div style="position:relative;top:99%">Item 5</div>
<div style="position:relative;top:99%">Item 6</div>

-------------</div>-------------------------

The above works well except for the fact that it runs over into my FOOTER <DIV> if there are too many items in the content.

My question is: Can I fix the size of the BODY div so that when the content wants to run into the footer, instead it would just be pushed up.

I'm currently using tables to do the separation, but with tables I find I can't always keep the items in the "zone" I want to keep them since I'm using valign=top/middle/bottom with a table of height=100%

I hope this makes sense.

[4css]

Have you tried a container/wrapper div? put everything inside of this, even your footer? Just a suggestion.