css - reset float after second column -

i have following layout:

html:

<div class="test">    <div class="a"> test</div><div class="b">test2</div>    <div class="a"> test</div><div class="b">test2</div>    <div class="a"> test</div><div class="b">test2</div>    <div class="a"> test</div><div class="b">test2</div>    <div class="a"> test</div><div class="b">test2</div>    <div class="a"> test</div><div class="b">test2</div> </div> 

css:

.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";   } 

it not reset float after .b;

what tried acheive 2 column list

test test2 test test2 test test2 test test2 

where both columns have fixed width

is here way acheive goal using css ? (no html markup change)

http://jsbin.com/ajimece/12/edit

you use :nth-child():

.test .a:nth-child(2n+1) {     clear: both; } 

example

to give container div width/background, can add (see here):

.test {     background: red;     width: 400px;     overflow: hidden; } 

example