[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center

I am trying to get the menu and logo areas in my header to be contained within the same width of my center column.

I tried moving this stuff around with margins and made it LOOK right, the problem is it moves around when the browser window is resized. How do I stop that?

The attached image is what I want it to look like, and stay fixed this way no matter the window size.

Also, how the heck do I make a matching background bar between the footer and white center column, like there is between the header and center column?