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>