Question

http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/

The following is a code that I wrote. The problem is that in the resulting page the wrapper div does not seems to container the nested divs.

Answer 1

Since your body elements, #left-container, #right-container, are being floated they are being removed from the regular content flow, so you will need a “clearfix” to properly contain the floated elements. You can do that in two ways:

One, by Using a clearfix, like the following, my preferred approach since its inline and doesn’t mess with the absolutely positioned elements that might be overflowed out of the container:

#wrapper:before, #wrapper:after {
    content:"";
    display:table;
}

#wrapper:after {
    clear:both;
}

#wrapper {
    *zoom:1; /* ie7 hasLayout fix */
}

Or two by using overflow:hidden on your #wrapper container, a method which i try to avoid since you might have positioned elements that might overflow out of your container with positition:absolute, so they will be cutoff with that method. A third option would be to add a at the end of your container, but that is just an icky approach :).

Demo with the first (and my preferred) approach http://jsfiddle.net/2EfLz/2/