I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.

![enter image description here](https://i.stack.imgur.com/J5D3J.jpg)

I'd really appreciate your help. Thanks :)

```
        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

```

Here is the [jsfiddle](http://jsfiddle.net/XFX55/)

Here is what I did and achieved using javascript
<https://jsfiddle.net/8o0nwft9/>
['https://Stackoverflow.com/questions/5234749', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/504617/']
on the assumption that your needs are more like your colored example code then:

```
.box:nth-child(odd){
    clear:both;
}

```

if it's going to be 3 rows then `nth-child(3n+1)`
This may not be the exact solution for everybody but I find that (quite literally) thinking outside the box works for many cases: in stead of displaying the the boxes from left to right, in many cases you can fill the left column first, than go to the middle, fill that with boxes and finally fill the right column with boxes.
Your image would then be:

[![order of filling ](https://i.stack.imgur.com/WTxhS.jpg)](https://i.stack.imgur.com/WTxhS.jpg):

If you are using a scripting language like php you can also fill the columns from left to right by adding a new box to it and outputting when all columns are filled. eg (untested php code):

```
$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;

```

$col1, $col2 and $col3 can have float:left and width: 33%, set the boxes inside the div to full width and no float.

Obviously if you are using javascript / jquery to load the boxes dynamically you are better of styling them this way as well, as explained in other answers to this thread.