Flexible full width backgrounds with HTML,CSS and 960.gs

I'm working on the front end build of a set of HTML templates with a tricky element in the design.

As you'll see from the screengrab the main navigation is a vertical list which will contain nested lists of links where child pages and sections exist thus requiring the height of the menu to be flexible.开发者_JAVA技巧

The design has a set of full width stripes in the background - header, centre and from beneath the main nav downwards. This is proving tricky to integrate as the dark blue background which goes the full width of the browser needs to be flexible and change alongside changes in the height of the main nav.

I have tried implementing the following solution from CSS tricks but it's causing various problems in various versions of IE.

I'm considering creating a blank absolutely positioned container that has it's height set by determining the height of the main nav via JavaScript but I'm worried about jumps in the layout on page load and again cross browser compatibility.

Any other suggestions on how to approach this?

It can be done with pure css bu not clearing floats. Basicly the idea is to have a div that wraps your nav and content, and float the content. The wrapper sould not have overflow:hidden. The float is cleared in footer.

Fiddle.

Tested FF4, Opera 11.50 and Chrome 12. Don't have IE on hand but it should work fine.