CSS Height Issue - Container Won't Stretch (no floats)

Question

Here at the two links that will display my problem: http://www.wontletthisbeatme.com/information.asp

On the Blog page, you will see that the content and container divs stretch to the bottom nicely even though the content does not require that much space. This places the footer at the bottom and it looks fine. However, in the second link, the information stretches beyond the viewpoint and the container divs and footer do not adjust to accommodate the extra content.

This is an issue I have been having for a while and have yet to really grasp the concept. I have the height:100% placed on my html and body elements as well as my containers but still find myself ineffective with footers in CSS. I have reviewed many links on the web and prior posts but, like I said, cannot get my head around this. Any help would be greatly appreciated.

Update

I have done some tweaking to the pages. Now, the final issue I see is with the information page where the information contained within the content div does not actually stretch the div downward. There are no floats and no reason that I can see that this div should not stretch with its content. Any advice?

Answer 1

My guess from not looking the source at the moment is an extra or missing <div> or </div> tag was added or removed...

Answer 2

That is most probably because the footerContainer div position is set to absolute

Answer 3

I think it's because CSS for footerContainer contains the attribute "position: absolute;". Removing it fixes the issue for me.

UPDATE: The container (i.e. contentContainer) stretches correctly if you remove the attribute "height: 100%" from it. But again, I didn' analyze the whole layout.

Answer 4

use as following;

.clear{clear:both; display:block; line-height:0%;}

and use the .clear as

<div class="clear"></div>

Answer 5

You are using position:absolute on the footer bar and the navigation bar. In order to fix this you need to stop using that on both so the navigation bar can push the footer bar down the page instead of giving it a fixed position.

Answer 6

set the .footerContainer to position: relative (or leave out the position-attribute)

Answer 7

What you describe that you want sounds very similar to the problem expressed in http://stackoverflow.com/questions/3150626/making-a-footer-not-rise-above-the-bottom-of-the-screen-without-extraneous-markup in which both myself and the original asker, Jason Christa, came up with workable solutions. The link had the particular requirement of not using a containing div but I think the concepts from it should prove useful in your application.