CSS - div not expanding so footer not going to bottom

[rsyCoder]

I am working with a template:

http://demo.templatewo rld.com/zero/in_action/green_solutions/

the relevant markup is:

<div id="bodyPan">
	<div id="leftPan">
		<div id="leftmemberPan">
			<h3>More tips</h3>
		</div>
	</div>
	<div id="rightPan">
  		<div id="rightbodyPan">
			<h2>About Us</h2>
	  	</div>
	</div>
</div>
<div id="footerPan">
	<div id="footernextPan">
		<h2>footer</h2>
	</div>
</div>

I am doing so to save time so I don't want to have to rework the way the whole page operates, even though some of it is pretty annoying. I have had to make some changes but my issue has been there since the start so you can use the template to see what my issue is.

When the main content section of the page is filled, the area doesn't expand and the footer doesn't get pushed down. Instead the text keeps going out of the div area and under the footer. If you just paste in a bunch of junk with firebug on the template site you can see what I mean.

If I remove the height declaration from rightbodyPan it will expand down to the height of the actual content of the text inside the div. If I remove the height declaration from rightPan it shrinks up to a line instead of expanding to the height of the rightbodyPan div that it contains, which is what I want. The footer remains still. The footer is stationary at the height of bodyPan. bodyPan does not expand with rightPan so it is always at the height set in the css but if I remove the height then bodyPan collapses to nothing and the footer is then under the header. I tried using height: 100% with the same effect of removing the height altogether.

I guess my really simple question in this context is:

How can I get rightPan div to expand based on the height of the rightbodyPan div? I am guessing the answer will be the same to, how can I then get bodyPan to expand to the height of rightPan div so the footer will be pushed down to the bottom?

Thanks for your time!!

[drhowarddrfine]

The problem occurs because rightbodyPan is absolutely positioned which removes it from the normal flow and allows everything you mention to happen. In fact, rightPan is also absolutely positioned so I get the impression this was slapped together by someone who didn't care about expandability.

You can play with changing rightPan to relative positioning but changing 'left' to some larger number.

[rsyCoder]

The problem occurs because rightbodyPan is absolutely positioned which removes it from the normal flow and allows everything you mention to happen. In fact, rightPan is also absolutely positioned so I get the impression this was slapped together by someone who didn't care about expandability.

You can play with changing rightPan to relative positioning but changing 'left' to some larger number.

Thanks! You pointed me in the right direction and I was able to get it all working correctly. I ended up needing to change rightbodyPan to relative as well as rightPan and the parent div to both of those. You got me started and probably saved me an hour or 3 of trial and error. Which is great because it I had already spent an hour on it before throwing the questions on the forum.

Thanks again