parent container encompassing the child elements

Use this:

.shadow-wrapper {
    background-color: red;
    clear: both;
    overflow:hidden;
}

To enclose floated elements you can use any the following:

float:left;
overflow:hidden;
display:table;
display:inline-block;
display:table-cell;

Other solution using the :after method:

.shadow-wrapper:after {
    clear:both;
    content:" ";
    display:block;
}

As you can see from this codes, clear both doesnt need to be applied everywhere, only after the last element which is floated, and therefore we can use the after method which simulates this.

http://jsfiddle.net/7wja6/