CSS place N divs inline-block column by column (vertically) - html

Question

The code below shows what I have but it is not user friendly way to show data(time). "display:inline-block" puts elements in a row and after it reaches parent div's width it puts his next child in the next row.
.rateDates {
display: inline-block;
margin: 10px;
font-family: consolas;
border: 1px solid #73d5e6;
border-radius: 15px;
padding: 4px 8px 4px 8px;
}
#ratesContainer {
border: 1px solid #73d5e6;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
height:200px;
}
<div id="ratesContainer">
<div class="rateDates">
<span>00:00:00</span>
</div>
<div class="rateDates">
<span>11:11:11</span>
</div>
<div class="rateDates">
<span>22:22:22</span>
</div>
<div class="rateDates">
<span>33:33:33</span>
</div>
<div class="rateDates">
<span>44:44:44</span>
</div>
<div class="rateDates">
<span>55:55:55</span>
</div>
</div>
The problem is I can't make it place child div's on top of each other and after the parent div's height is not enaugh start from top again. In other words start a new column.
I want to place rateDates class divs in column way. So they first fill up not the row but the column.
Page renders automatycally. I need a CSS solution. If it is posible.
Thank you.

Answer 1

use a flex property.
Here is updated code.
CSS
.rateDates {
margin: 10px;
font-family: consolas;
border: 1px solid #73d5e6;
border-radius: 15px;
padding: 4px 8px 4px 8px;
}
#ratesContainer {
border: 1px solid #73d5e6;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
height:200px;
display:flex;
flex-direction:column;
flex-wrap:wrap
}
HTML
<div id="ratesContainer">
<div class="rateDates">
<span>00:00:00</span>
</div>
<div class="rateDates">
<span>11:11:11</span>
</div>
<div class="rateDates">
<span>22:22:22</span>
</div>
<div class="rateDates">
<span>33:33:33</span>
</div>
<div class="rateDates">
<span>44:44:44</span>
</div>
<div class="rateDates">
<span>55:55:55</span>
</div>
</div>

Answer 2

You can do it the Flexbox:
#ratesContainer {
display: flex; /* displays flex-items (children) inline */
border: 1px solid #73d5e6;
padding: 15px;
border-radius: 10px;
margin: 20px 0;
}
#ratesContainer > .rateDates {
flex: 1;
text-align: center;
margin: 10px;
font-family: consolas;
border: 1px solid #73d5e6;
border-radius: 15px;
padding: 4px 8px;
}
#media (max-width: 768px) { /* adjust */
#ratesContainer {
flex-direction: column; /* stacks children vertically */
align-items: center; /* because of the changed direction this is now horizontal centering, otherwise it's vertical by default */
}
}
<div id="ratesContainer">
<div class="rateDates">
<span>00:00:00</span>
</div>
<div class="rateDates">
<span>11:11:11</span>
</div>
<div class="rateDates">
<span>22:22:22</span>
</div>
<div class="rateDates">
<span>33:33:33</span>
</div>
<div class="rateDates">
<span>44:44:44</span>
</div>
<div class="rateDates">
<span>55:55:55</span>
</div>
</div>
It's a bit different approach but the end result is what you want, i.e. display them in one column vertically.

Answer 3

Just to mention an alternative approach, this can be also done with multi-column layout:
.rateDates {
display: inline-block;
margin: 10px;
font-family: consolas;
border: 1px solid #73d5e6;
border-radius: 15px;
padding: 4px 8px 4px 8px;
}
#ratesContainer {
border: 1px solid #73d5e6;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
height:200px;
column-width: 110px;
column-fill: auto;
}
<div id="ratesContainer">
<div class="rateDates">
<span>00:00:00</span>
</div>
<div class="rateDates">
<span>11:11:11</span>
</div>
<div class="rateDates">
<span>22:22:22</span>
</div>
<div class="rateDates">
<span>33:33:33</span>
</div>
<div class="rateDates">
<span>44:44:44</span>
</div>
<div class="rateDates">
<span>55:55:55</span>
</div>
</div>
But I prefer the Flexbox solution. These items don't look like parts of the text flow, that inline-block was designed for. And with Flexbox you will not need to hardcode the width of the column.