So i have done many a search in various forums and on google and i came up short so i figure i'll post my delima here.

Ive been using tables for some time now but knowing it will be better for me in the long run, im trying to do away with them and use div's and css. I have a parent div (we'll call it main) with three children div's (we'll call them top, middle and bottom) inside. The main div's height is set to 100% (thats 100% of the body) while the top and bottom div's heights are both set to 100px. To keep the site looking the way i want it to, i would like the middle div to expand to fit the remaining space in the parent div. If i set the middle div's height to 100% it displays at the same size of the parent div (i know this is because of the way div's work and the box model and so on...). But i need it to display at 100% of the remaining space inside the main div.

I know this is pretty easy using tables but how can it be done using div's and css? Any ideas? Many thanks in advance!!