css positioning child divs - html

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
There can be more than 8 children.....but always an even number (10,12,14 etc)
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)
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.