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/']
I'm providing this answer because even when there are good ones which do provide a solution([using Masonry](http://masonry.desandro.com/)) still isn't crystal clear why it isn't possible to achieve this by using floats.

(this is important - **#1**). 

> 
> A floated element will move as far to the left or right as it can **in
>  the position where it was originally**
> 
> 
> 

So put it in this way:

We have 2 div

```
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

```

without `float` they'll be one below the other

![enter image description here](https://i.stack.imgur.com/5ilLh.png)

If we `float: right` the `div5`, the `div6` is positioned on the line where the `div5` was ,

`/*the lines are just for illustrate*/`

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

So if now we `float: left` the `div6` it will move as far to the left as it can, "**in this line**" (see #1 above), so if `div5` changes its line, `div6` will follow it.

Now let's add other div into the equation

```
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

```

We have this

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

If we set `clear: right` to the `div5`, we are forcing it to take the line bellow `div4`

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

and `div6` will float in this new line wether to the right or to the left.

Now lets use as example the question that brought me here due to a duplicate [Forcing div stack from left to right](https://stackoverflow.com/questions/32102623/forcing-div-stack-from-left-to-right#32102623)

Here the snippet to test it:

```css
div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:40px;
}

.three{
    background-color:orange;
    height:55px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}
```

```html
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>
```

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

In the above image you can see how `div.5` is stocked just next to `div.3` that is because in its line (defined by the line box of `div.4`) that is as far it can go, `div.1*`, `div.2*`, etc, also float left of `div.5` but as they don't fit in that line they go to the line bellow (defined by the line box of `div.5`)

Now notice that when we reduce the height of `div.2*` enough to be less than `div.4*` how it let pass to `div.5*`:

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

I hope this helps to clarify why this can not be achieved using floats. I only clarify using floats (not inline-block) because of the title "*CSS Floating Divs At Variable Heights*" and because right now the answer is quite long.
Thanks to thirtydot, I have realised my previous answer did not properly resolve the problem. Here is my second attempt, which utilizes JQuery as a CSS only solution appears impossible:

```
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>

```

The only problem that remains for my solution is, what happens when a box is two-box-widths instead of just one. I'm still working on this solution. I'll post when complete.