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

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 2

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> 

Answer 3

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;
}