title: reset float after second column
body: <p>I have the following layout:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="test"&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
     &lt;div class="a"&gt; test&lt;/div&gt;&lt;div class="b"&gt;test2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.test .a,.test .b {
    float: left;
    width: 100px; 
  }
  
  .test .a:nth-child(4n+1) , .test .b:nth-child(4n+2) { 
    background: lightgreen;
  }
  
  
  .test .b:after {
    clear: both;
    display: block;
    content: "\a";  
  }
  </code></pre>
  
  <p>it does not reset <code>float</code> after <code>.b</code>;</p>
  
  <p>what I tried to acheive is two column list like </p>
  
  <pre><code>test test2
  test test2
  test test2
  test test2
  </code></pre>
  
  <p>where both columns have fixed width</p>
  
  <p>Is here any way to acheive my goal using only CSS ? (no html markup change) </p>
  
  <p><a href="http://jsbin.com/aJiMECE/12/edit" rel="nofollow">http://jsbin.com/aJiMECE/12/edit</a></p>