css positioning child divs

Question

Is it possible to do this using css (and how)?

------------------------------------------
|  ----------   ----------   ----------  |
|  | Child 1 |  | Child 3 |  | Child 5 | |
|  ----------   ----------   ----------  |
|  ----------   ----------   ----------  |
|  | Child 2 |  | Child 4 |  | Child 6 | |
|  ----------   ----------   ----------  |
|  ----------                            |
|  | Child 7 |                           |
|  ----------                            |
|  ----------                            |
|  | Child 8 |                           |
|  ----------                            |
------------------------------------------

using the following :

<div class="parent">
   <div class="child">Child1</div>
   <div class="child">Child2</div>
   <div class="child">Child3</div>
   <div class="child">Child4</div>
   <div class="child">Child5</div>
   <div class="child">Child6</div>
   <div class="child">Child7</div>
   <div class="child">Child8</div>
</div>

.parent {width:100%}
.parent div {width:100px; margin:2px;}

Edit: Maybe I didn't explain clearly what i want...so

1. There can be more than 8 children.....but always an even number (10,12,14 etc)

2. A div with an even number must be always under his preceding odd div (2 under 1, 4 under 3....8 under 7, 10 under 9)

3. When parent's width is not enough to hold pairs of childer: it expands its height (like starts a new line)

Edit2: The correct result is here: http://jsfiddle.net/97ZpN/3/

but in this solution i had to put every pair of divs into a sub-container. Is it posiible to do it with the original html?

Answer 1

hope it will help you

    .parent {width:100%}
 .parent div {float:left; margin:2px;width:30%}
 .parent div.child:nth-child(7),.parent div.child:nth-child(8){
  float:none;
  clear:both;
}

demo: http://jsfiddle.net/97ZpN/

Explanation:

.parent div {float:left; margin:2px;width:30%} 

This line in the CSS will make all the child elements to float towards the left. So the elements will automatically stack one after other.

 .parent div.child:nth-child(7),.parent div.child:nth-child(8){
      float:none;
      clear:both;
    }

The clear:both does the trick here. clear:both means there cannot be any elements on the left or right side of the referenced element.