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)`
On modern browsers you can simply do:

```
display: inline-block;
vertical-align: top;

```