Fill a container (a div) until it is full - php

Question

I have an array of strings.
$x=array('blabla1', 'blabla2', ...);
I want to fill a div block with strings from $x until my div is full. The height of my div is fixed to $h.
For instance, I want to put in my div something like that
<div>
<ul>
<li> 'blabla1' </li>
<li> 'blabla2' </li>
<li> 'blabla3' </li>
...
</ul>
</div>
until it is full.
Any guess how to do so ?
Javascript or php ?
Thank you :)
Why I want to do this : I have a side div on my webpage with suggested links. I want to put as many suggested links as possible in this side div.
Colas
PS : Feel free to edit my post (eg, add tags).

Answer 1

Its going to be problematic to do this by just using php.
My suggestion is to do it using overflow hidden css property in combination with a jquery plugin like:
dotdotdot

Answer 2

You must determine the height of your div in any fixed measurable unit such as px. Then adjust the height of each list item. By dividing the height of div/ the height of list item, you will know the number of list items required say n so inside your div do the following:
<div class="define-height">
<ul>
<?php
for ($i = 0; $i < $n; $i++){
?>
<li><?php echo $x[$i];?></li>
<?php } ?>
<ul>
</div>

Answer 3

Because you already know the fixed height value of your div. You can also add a fixed height value to the li elements and then from php do the following:
I am assuming that you already set the fixed height values for the div and ul in your css.
$div_height = 500px;
$li_height = 21px;
echo '<div id="mydiv"><ul id="myul">';
for($i=0;$i<=$div_height;$i+=$li_height){
echo "<li>"."your content here"."</li>";
}
echo '</ul></div>';

Answer 4

Using jQuery client side:
while( $("#divId").height() > $("#ulId").height() ) {
$("#ulId").append("<li>blabla1</li>");
}

Answer 5

From the comments :
any reason you can't just use overflow: hidden? – Marc B
Then you have to doit through javascript. From javascript is the only way you can have the height of a dom element after created. Maybe this div has to be dynamically populated through an ajax call to php that returns only one li element. And after that in javascript calculate if there is enough space to anoter li element in that case do the next call until there is no more available space. You can also set overflow:hidden in your div but this will only hide the content that is out of the div. – slash28cu