parent container encompassing the child elements

css, css-float

Solution

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/

Problem

Im not sure why my float isn't clearing so that a child container will stay inside the parent container. Have a look at this jsfiddle to see what i mean. I want the `.shadow-wrapper` div to encompass all the other elements that follow it. How can I get the parent container to encompass the child elements?

Original source