"height: 100%;" not working (CSS)

At this link you can see the problem: http://www.cashmgmt.com/new.0/contact.php

The gold background on the bar to the right should be extending to the bottom of the page. I have a total of 3 divs related to this problem. One is called #main with its height set to auto. Within #main there are two divs (#content and #widgets) set to be next each-other with a "float: left" property. The contents of #content, therefore, determine the height of #main. The div #widgets, also contained within #main, has its height set to 100%. Since contained within #main, #widgets SHOULD extend the full length of #main (whose height is determined by the contents of #content), but for some reason it isn't. Its height is only as long as its contents, rather than being 100% of #main's height.

I'm sure that was all very poorly explained :), but what am I missing? What needs to be done to get the #widgets div to extend to the bottom of #main? Time is of the essence, and any help would be GREATLY appreciated. Thank you in advance,

Carl

You can't have a 100% height of nothing. Your elements need to have a height set to them. You are actually going about this the wrong way. Remove the margins and padding on the body. Then set the html and body elements to a height of 100%. Then set a min-height of 100% on the #container. Set the left column background image on the container making it repeat-y using top right. Use google to find out ways to fake min-height in IE6.