I've found it. =)
The problem it's because the "#main" div has an overflow: hidden; on it.
When you input overflow: hidden; to any div, it doesn't matter if you have floated, positioned or whatever element inside of it, nothing, absolutely nothing will wander outside the div space. Imagine that like a big chainsaw running around the border of the div in infinite loop, hehe.
If you take it off, it'll work. =)
Yes, but... OMG WHERE DID MY BACKGROUND GO???
Yeah, i noticed that too. It happens because you have floated elements inside the #main div, and they don't add "content-generated-height" to it, thus in this case, creating no height at all.
It was working with overflow: hidden; because when you apply overflow rule to a div, the browser understands that you'll need a rule to any elements that wander outside, so it somehow wraps up the whole thing.
Yeah, cool, but how do i solve this?
Analizing your code, i noticed that the "#content" div ocuppies the same bodyspace as the #main div, so, just put the background on it, and there you go, problem solved. ;)