I've included a snapshot of my layout below. Each square represents a div.



What I'm trying to achieve is to have a background behind the .pre-footer and .footer elements that spans the entire width of the browser.

Currently, since these elements default widths are constrained by their parent div, .main, any background applied to them is only as wide as the parent container width.

How would you achieve a full width background for these elements? (While at the same time, maintaining a fixed width, centered layout for the other elements as in the snapshot.)

I've attached a modified version of my layout below, to show you my intended final layout, with a the pre-footer div floating to the left of the footer div and its child elements floated to the left of each other.



I've got the css for the basic layout down. I just need some ideas on how to arrange the .pre-footer and .footer css to do the full width background, with centered elements.

Any help much appreciated.