Here’s there problem. When naming your last (presumably since it’s the Footer and you should be working top-down) widget area, don’t use the name Footer when you have a <div id=”footer”>. This will cause that widget area to take on the Footer styling and not appear or appear in the wrong place. One more reason to chalk it up for Firebug!
Don’t do this:
'id' => 'footer',
But if you rename footer to footer-widget:
You won’t have that problem. You can also rename your stylesheet but that’s just silly.