css positioning child divs

css, html

Solution

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.

Problem

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?

Original source