Using :after to clear floating elements

css, html

Solution

Write like this:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Check this http://jsfiddle.net/EyNnk/1/

Problem

I have a list and the li's have a `float:left;`. The contents after the `<ul>` should be aligned correctly. Therefore i can build the following: http://jsfiddle.net/8unU8/ I thought, that I can remove the `<div class="clear">` by using pseudo selectors like :after. But the example is not working: http://jsfiddle.net/EyNnk/ Do I always have to create a separate div to clear floating elements?

Original source