Move div position based on content

[BWWebDesigns]

I am wanting to use full css on a page and not use tables but struggling to get something to work

I have a div element for the top the bottom and the middle and I need the bottom div to be moved to the bottom of the middle div element, which will allow the middle div element to contain content of varying size and the footer content in the bottom div element will always be positioned at the very bottom of the middle div element and everything will line up properly

I know its probably something simple i am overlooking, but I need help

Can anyone tell me what css code I would use for each of the 3 divs to position them underneath each other and make it so the bottom div element starts where the middle div element ends regardless of the height of the middle div element which will not have aset height but will be beased on the length of the text it contains

Thanks in advance

<div id="top">fixed size header image here</div>
<div id="middle">main content here height changes depending on length of content</div>
<div id="bottom">fixed size footer image here</div>

[WestWeb]

I would add a container div as well, it should contain the three other divs. Then it's really quite simple, though you might like to change my color scheme
CSS

#container {
width: 960px;
margin: 0px auto;
}
#top {
height: 100px;
background: #e00;
}
#middle {
background: #ee0;
}
#bottom {
height: 100px;
background: #0d0;
}

HTML

<div id="container">
<div id="top">fixed size header image here</div>
<div id="middle">main content here height changes depending on length of content</div>
<div id="bottom">fixed size footer image here</div>
</div>

So, now that all three div's are contained, the bottom div will always be under the middle div regardless of the height of the content in the middle div.

[BWWebDesigns]

Thanks, tried your suggestion and still having some errors, made a few modifications to get things to line up correctly but still not looking right

lawsmichigan.com for the page im building

a header graphic a footer graphic and a middle graphic which is set as background repeating down the page depending on size of the middle div content but there is a gap between top and middle and middle and bottom??

Any advice on where I went wrong

You can check out my source on the above site

[BWWebDesigns]

never mind, I decided to get rid of all the other divs and just put the images all into one div and it seems to work how I need it to

Thanks anyway