Automatic layout of block elements - css

Question

I have layout similar to following one:
#first {
height: 100px;
float: left;
}
#second {
height: 200px;
float: left;
}
#third {
height: 100px;
float: left;
}
.column {
background: red;
width: 200px;
margin: 5px
}
<div id="parrent">
<div id="first" class="column">
FIRST
</div>
<div id="second" class="column">
SECOND
</div>
<div id="third" class="column">
THIRD
</div>
</div>
When we have enough space, it looks like that:
This is OK.
When we don't have enough space, it looks like that:
And this is not OK. I don't want this empty space between block 1 and 3.
I want to achieve something like this:
How can i do that?

Answer 1

This is not possible with your code alone - you need to specifiy at least one mediaquery for this:
#media (max-width: 480px) {
#second {
float: right;
}
}
You need to specify the max-width of the media-query according to your needs.

Answer 2

Using only CSS it is not possible to align the divs to take empty space.
If you do not want to leave any empty space then you should go for masonry layout that uses jQuery.
You can read more about it at:
http://masonry.desandro.com/layout.html
I think that's what you are looking for.
But, If you want to align your items in vertical columns then you can use Flexbox:
(This might not be the answer you are looking for but I still wanted to share that there is an option to align columns vertically using flexbox)
DEMO:
http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview
HTML:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
CSS:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 306px;
width: 200px;
}
li {
width: 100px;
height: 100px;
background:red;
color: white;
text-align: center;
font-size: 50px;
line-height: 100px;
font-weight: bold;
border: 1px solid white;
list-style: none;
}
DEMO:
http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview

Answer 3

Changes in your second style may it help you
#first {
height: 100px;
float: left;
}
#second {
float: right;
height: 200px;
margin-right: 190px;
}
#third {
height: 100px;
float: left;
}
.column {
background: red;
width: 200px;
margin: 5px
}
<div id="parrent">
<div id="first" class="column">
FIRST
</div>
<div id="second" class="column">
SECOND
</div>
<div id="third" class="column">
THIRD
</div>
</div>