How to get in the new column after height of parent exceeds

Question

I am struggling with columns and rows and cannot get it to work, here is the example of what I need:

Here is the css I have:

ul.people {
 position: absolute;
 width: 900px;
 height: 640px;
 top: 450px;
 right: 318px;
 list-style: none;
 overflow: hidden;
}

li.man-red {
 width: 45px;
 height: 132px;
 background: url(../img/man_red.png) no-repeat;
 background-position: 3px 5px;
}

So, I need that every fifth li element goes into a new column.

Answer 1

To answer my own question, I set this styles and it actually works:

ul.people {
  position: absolute;
  width: 900px;
  height: 640px;
  top: 450px;
  right: 318px;
  list-style: none;
  overflow: hidden;
  -webkit-columns: 20;
  -moz-columns: 20;
  columns: 20;
  -webkit-column-gap: 0; 
  -moz-column-gap: 0; 
  column-gap: 0;
  -webkit-column-rule: 0; 
  -moz-column-rule: 0; 
  column-rule: 0;
}

li.man-red {
  width: 45px;
  height: 132px;
  background: url(../img/man_red.png) no-repeat;
  background-position: 3px 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

Answer 2

I've managed to come up with some clever stuff using:

• float:left;
• relative positioning using top & left co-ordinates
• negative margin-left

Example:

li.man-red {
 position: relative;
 float: left;
 width: 45px;
 height: 132px;
 margin: 1px;
 color: #fff;
 font-weight: bold;
 background: url(../img/man_red.png) no-repeat #f00;
 background-position: 3px 5px;
 list-style-type: none;
}


li.man-red:nth-of-type(4n+1) {
top: 0;
left: 0;
}

li.man-red:nth-of-type(4n+2) {
top: 134px;
left: -47px;
}

li.man-red:nth-of-type(4n+3) {
top: 268px;
left: -94px;
}

li.man-red:nth-of-type(4n+4) {
top: 402px;
left: -141px;
}

li.man-red:nth-of-type(4n+5) {
margin-left: -140px;
}

li.man-red:nth-of-type(4n+6) {
margin-left: -93px;
}

li.man-red:nth-of-type(4n+7) {
margin-left: -46px;
}

li.man-red:nth-of-type(4n+8) {
margin-left: 1px;
}

<ul>

<li class="man-red">1</li>
<li class="man-red">2</li>
<li class="man-red">3</li>
<li class="man-red">4</li>

<li class="man-red">5</li>
<li class="man-red">6</li>
<li class="man-red">7</li>
<li class="man-red">8</li>

<li class="man-red">9</li>
<li class="man-red">10</li>
<li class="man-red">11</li>
<li class="man-red">12</li>

<li class="man-red">13</li>
<li class="man-red">14</li>
<li class="man-red">15</li>
<li class="man-red">16</li>

<li class="man-red">17</li>
<li class="man-red">18</li>
<li class="man-red">19</li>
<li class="man-red">20</li>

</ul>

Answer 3

Something like this you are trying to achieve? Adding groups of 5 li in each ul

Snippet

ul {
  display: inline-block;
  background:lightblue;
  margin:0;
  padding:0;
}
.figure {
  width: 45px;
  height: 132px;
  margin: 1px;
  background: url(//lorempixel.com/45/132) no-repeat red;
  background-position: 3px 5px;
  list-style-type: none;
}

<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>
<ul>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
  <li class="figure"></li>
</ul>