There is something strange with the way you created the page that has this not really acting like a column layout and I think that is causing the white gap near the bottom above the footer. The expandedcontent div seems outside the normal flow and is just constrained to fit where it is. When ever your right column pushes the container box lower than expandedcontent div, you're going to get that white box.
It might be better if you had a maincontent div that had three column divs inside it, floating next to each other. You can use the maincontent div to repeat your background image vertically so that the entire content area's background extends to the bottom of the maincontent div and you don't get gaps.
Typically when using floats, if something isn't working the way you expect, the problem is caused by either widths not being what you expect or you haven't cleared elements that need to be cleared.
For something like a footer that should span the entire width, you should use:
On your footer div. This will make sure nothing floats to the left or right of it.