div tag - splitting page into 3 variable sizes.

Hi,

Wonder if any of you guys can point me in the right direction with this
little problem.

I'm setting up a page with three div sections, all with the size width.
div layer1 = fixed location/height/top - header section with menu and
background.
div layer2 = fix top position, but need to vary in height on the fly as it
will be reading in variable number of records from database.
div layer3 = fix height size, but top location will vary depending on end
position of div #2.


<div id=layer1 style="position:absolute; top:0px; left:0px; width:800;
height:180; z-index:1; padding:0px; border: #ffffff 02px solid;
background-color:#ffffff; background-image:url(./images/header.jpg);
layer-background-image:url(./images/header.jpg);">
Header info and menu.
</div>

<div id=layer2 style="position:absolute; top:181px; left:0px; width:800;
z-index:2; padding:0px; border: #ffffff 02px solid;
background-color:#ffffff; background-image:url(./images/blank.jpg);
layer-background-image:url(./images/blank.jpg);">
Main section, variable length.
</div>

<div id=layer3 style="position:absolute; top:700px; left:0px; width:800;
z-index:3; padding:0px; border: #ffffff 0px solid; background-color:#ffffff;
background-image:url(./images/footer.jpg);
layer-background-image:url(./images/footer.jpg);">
Footer section
</div>

~top~ position on layer3 is 700px, but could be anything from 600px upwards
depending on number of records in database.

I've tried various things, but having no joy with this.

Greatly appreciate if some one can point me in the right direction (even if
it's only to say that it's not possible!)

Cheers.