Line break with css

winchendonsprings

I have 7 divs in a row with all very little content. I want to have the first 3 one a line then the next 3, and so on.

<div class="parent">
 <div class="child-a">abc</div>
 <div class="child-b">def</div>
 <div class="child-c">ghi</div>
 <div class="child-d">jkl</div>
 <div class="child-e">mno</div>
 <div class="child-f">pqr</div>
 <div class="child-g">stu</div>
</div>

So how can I make this work?

For the first line I have

.child-a, .child-b, .child-c {
  padding: 0 2% 0 0;
  width:100%
  display: inline;
  float: left;
 }

What would the css be for child-c, child-d, child-e so that they would be displayed below child-a, child-b, child-c rather than on the same line?

My complete code: http://jsfiddle.net/winchendonsprings/UfswL/11/