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 '<a class="LibSectOpen">
       <span style="display:none" class="SectionName">'.$Section.'</span>
       <div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
       <div class="LibrarySectsShelf">';
        while($row = mysql_fetch_array($log2)){ 
          echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
          title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
        }
echo ' </div>
       </div>
      </a>';

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 2px 2px 2px; font-size:10px; color:rgba(0,0,0,1) !important; background-color: rgba(255,255,255,0.6); line-height:18px;
                  }
.LibrarySectsShelf {
    border:1px #CCC solid;width:499px; margin:2px; padding:1px; height:129px;border-radius:2px 2px 2px 2px; font-size:10px; background-color: rgba(255,255,255,0.2); line-height:18px; background-image:url(images/bg/wood.jpg); background-size:100%; background-repeat:no-repeat;
}
.LibrarySectsShelf_Book {
    border:1px #C90 solid;width:148px;height:23px; margin-bottom:1px;border-radius:3px 3px 3px 3px; font-size:10px; background-color: rgba(51,153,255,0.9); padding-left:2px; line-height:22px; color:rgba(255,255,255,1) !important; overflow: hidden;
}
.LibraryBooks {
    border:1px #CCC solid;width:502px; margin:2px; padding:1px;border-radius:2px 2px 2px 2px; font-size:10px; background-color: rgba(102,102,102,1); line-height:18px;
}

Answer 1

You can achieve the output you want using only PHP,HTML,CSS solution which you are already using:

PHP

$i=1;
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf"><div class="move_right">';
while($row = mysql_fetch_array($log2)){ 
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
      title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i%5==0)
{
    echo '</div><div class="move_right">';
}
$i++;
}
echo '</div></div></div></a>';

The above code uses <div class="move_right"> ... </div> 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

Answer 2

I'll provide you with 2 solutions here, PHP and CSS, as @ariel has already contributed a jQuery solution, since I always like to be JS independent, and also it will save you, using a third party script, along with jQuery Library (If you aren't using jQuery), I chosed PHP first, and than the CSS one which may be less compatible in terms of IE.

If you want to achieve that using PHP, you need to alter your loop and set a counter, which will break..

Assume that we are having an array of elements, and we want to set just like you need it..

<div class="wrapper">
    <ul>
        <?php
            $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
            $counter = 0;
            foreach ($arr as $value) {
                if($counter%5==0 && $counter != 0){ echo "</ul><ul>";}
        ?>
            <li><?php echo $value; ?></li>
        <?php
                $counter++;
            }
        ?>
    </ul>
</div>

Here, am using a counter variable which am incrementing at the end of the loop, the line over here $counter%5==0 in if condition states that if the loop counter is divisible by 5, add </ul><ul>, hence, this will generate a group of ul which are floated to left.. consisting of 5 li each.

Demo - Fiddle Code

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    height: 150px;
    margin: 50px;
    border: 1px solid #eee;
}

ul {
    float: left;
    list-style-type: none;
}

ul li {
    height: 30px;
    width: 150px;
    background: tomato;
    border: 1px solid #515151;
}

Now as you said that but after the number of contents is more than 5 the height becomes greater than that of the div hence if you apply the same logic in your markup, it will force the div to start another column.

Demo - Fiddle Code

<a class="LibSectOpen">
    <span style="display:none" class="SectionName"><?php $value; ?></span>
    <div class="LibrarySects"><div class="LibrarySectsHeader">Whatever</div>
        <div class="LibrarySectsShelf">
            <div class='inner_wrap'>
            <?php
                $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
                $counter = 0;
                foreach ($arr as $value) {
                    if($counter%5==0 && $counter != 0){ echo "</div><div class='inner_wrap'>";}
            ?>
                <div class="LibrarySectsShelf_Book" title="Author:">Whatever <?php echo $value; ?></div>
            <?php
                    $counter++;
                }
            ?>
            </div>
        </div>
    </div>
</a>

---

Doing the same with CSS, you can use column-count property, but as far as IE is concerned, it will make a mess.. though if you're interested in the solution, than here you go...

Demo

HTML

<ul>
   <li>1</li>
   <!-- More incremented li -->
</ul>

CSS

ul {
    list-style-type: none;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

For Multi Column Support Reference