CSS Clear after every nth-child

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/