I'm facing an issue with the layout of my page. In this example (http://jsfiddle.net/RR2Xc/2/), the footer is not positioned at the bottom as desired. If I force the footer to be at the bottom, it creates a gap between the sidebar and footer where the sidebar should extend to reach the footer. It may sound confusing, but essentially, when there's minimal text on the page, the browser adds space below the footer. However, when there's a lot of text, everything displays correctly.
Any help would be greatly appreciated!
PS: Will using floats directly solve this issue for IE6 compatibility?