Problem:
After floating the nested layers, the container is unable to contain the floats

Issue:
What you're seeing in Firefox is how floats are intended to work. You've floated both the left and the right columns, so the containing layer is no longer required to contain them.

Solution:
Add a clearing element after the two floated divs:

<br style="clear: both;" />

Problem:
After floating the nested layers, the container background colour would not show in Firefox

Issue:
When you float the div you remove it from the normal flow of the document. Since everything inside of the background div has been removed from it as far as the document flow is concerned the background div doesn't have any height.

Solution:
Specify a height on the background div