parent container encompassing the child elements

Question

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?

Answer 1

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/