html - CSS Clear after every nth-child

Question

I have multiple items with same width inside a container. Because of different heights of the elements, there is problem with the alignment, you can see in image below.

I want to clear after every 3rd item without changing the html markup, so that the 4th item goes to the next row. I'm trying to add nth-child(3):after, but does not seem to work.

Here's the code:

HTML:

<div class="list">
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
</div>

CSS:

.item:nth-child(3):after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Demo: http://jsfiddle.net/KPXyw/

Answer 1

Actually it's

.item:nth-child(3n+1){
    clear:left
}