Cross Browser Layout Help

I am having trouble creating an HTML5 cross browser template FF3+ and IE8+:

Specifications:

Width: 990px;

My navigation is on the left hand side using <nav> syntax

My navigation is inside a div with an id called leftCol this div has a background called metalbg.

My content area is in a div called content.

My foote开发者_运维知识库r is in footer tags

Issue:

I am trying to create the css so if the site has "no scroll" the footer stays at the bottom and the site is "full hight" but if I have more content that requires a scroll the metalbg image will expand as well as the content area but then it must join back at the bottom.

I cannot seem to get both working.

I think to achieve this you should try the Sticky Footer technique by Ryan Fait.

This won't work however if you want the footer to stay at the bottom of the browser window even if the content is larger than the height of the browser window.