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.
With a little help from this comment ([CSS Block float left](https://stackoverflow.com/questions/4889230/css-block-float-left)) I figured out the answer.

On every "row" that I make, I add a class name `left`.  

On every other "row" that I make, I add a class name `right`.

Then I float left and float right for each of these class names!

The only complication is that my content order is reversed on the "right" rows, but that can be resolved using PHP. 

Thanks for your help folks!

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

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

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

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}
```

```html
<div id="holder">
  <div class="box one left">1</div>
  <div class="box two left">2</div>
  <div class="box four right">4</div>
  <div class="box three right">3</div>
</div>
</body>
```