How to pack contents in a div to move to the right when content reaches bottom of the div

Question

Im generating some content with PHP, but after the number of contents is more than 5 the height becomes greater than that of the div, so i don't want it to stack on top of the div, but to move to the right of the div and start from the top. Here's an image. PHP ``` echo '

'.$Section.'

'; while($row = mysql_fetch_array($log2)){ echo '

'.$row['bbookname'].'

'; } echo '

'; ``` As it looks, the philosophy books in the example goes down, and i want it to go to the right and start another column of five books and so on. Any ideas i can do this with JQuery and CSS? ``` .LibrarySectsHeader { border:1px #CCC solid;width:500px; margin:2px; padding:1px; height:18px;border-radius:2px…

Accepted Answer

You can achieve the output you want using only PHP,HTML,CSS solution which you are already using: PHP ``` $i=1; echo '

'.$Section.'

'; while($row = mysql_fetch_array($log2)){ echo '

'.$row['bbookname'].'

'; if($i%5==0) { echo '

'; } $i++; } echo '

'; ``` The above code uses `

...

` to divide elements in group of 5 so as to display each group in a new column. CSS (.move_right) ``` .move_right{ display:inline-block; vertical-align:top; } ``` Fiddle of how the generated HTML's output will be

How to pack contents in a div to move to the right when content reaches bottom of the div

Solution

Problem