Aligning divs top to bottom and then left to right

Question

I have a main division of width 200px and height 500px. Based on some events I need to add sub divisions of width 50px and height 50px into the main divisions. I need to add it from left Top to bottom and flow towards right.

|---------------|
|       |       |   
|   1   |   4   |
|-------|-------|
|       |       |
|   2   |   5   |
|-------|-------|
|       |       |
|   3   |   6   |
|-------|-------|

I have tried these CSS, but it is not working.

.SubDiv {
   height: 50px;
   width: 50px;
   background: red;
}

.MainDiv {
   max-height: 200px;
   height: 200px;
   width: 200px;
   background: blue;
   min-width: 100px;
   direction: inherit;
}

<div>
    <div id="SimulationPage">
       <div id = "ParentDiv" class="MainDiv">
       </div>
    </div>

    <input type='button' id = "adddiv" value='add div' />
</div>

$(document).ready(function () {
    $('#adddiv').bind('click', function (eventargs) {
        $("#ParentDiv").append('<div class="SubDiv"> </div>');
    });
});

can some one help me to achieve what i want.

Answer 1

What you want to achieve can not be done purely in css because you have unknown number of child's in the parent class and to float them right-left, you have to find the middle most child and float it from there on.

If jQuery pleases you ( and since you have tagged this question in it )

here is a solution for dynamic count with jQuery

jQuery to use :

 var count = $(".MainDiv").children().length; /*get total childs */
    var mid_child = Math.ceil(count / 2) + 1; /* find mid child */
    var x = 1; /*parameter to set negtaive margin, to push right float on top*/
    var current_div_number = mid_child; /* div number to set margin */

    /*assign class name to 2nd half childs, to float them right 
  through css, can be done through jQuery too!!*/
    $(".MainDiv .SubDiv:nth-child(n+" + mid_child + ")").addClass("mid");


    /* check each .mid class and assign negative margin-top*/
    $(".MainDiv .mid").each(function (index) {
        $(".MainDiv .SubDiv:nth-child(" + current_div_number + ")").css('margin-top', -(mid_child * 50) + (50 * x) + 'px');
        x = x + 1;
        current_div_number = current_div_number + 1;
    });

CSS

.MainDiv > div.mid {
    float:right;
    background: green;
}