title: CSS Clear after every nth-child
body: <p>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. </p>
  
  <p>I want to clear after every 3rd item <strong>without changing the html</strong> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/Nc61W.png" alt="enter image description here"></p>
  
  <p>Here's the code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="list"&gt;
      &lt;div class="item"&gt;Lorem ipsum dolor sit amet,&lt;/div&gt;
      &lt;div class="item"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/div&gt;
      &lt;div class="item"&gt;Lorem ipsum dolor sit amet,&lt;/div&gt;
      &lt;div class="item"&gt;Lorem ipsum dolor sit amet,&lt;/div&gt;
      &lt;div class="item"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.item:nth-child(3):after{
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/KPXyw/">http://jsfiddle.net/KPXyw/</a></p>