Question

This should be a really simple one, but just cant get it to work. I have a database with lets say 20 items. I am using php to echo each item. my code is :

echo "<li> <a class='bodylinks' href='http://domain.co.uk/fish/$txt2/'>$txt</a> </li>";

My problem is that my page only has height for say 14 of the items, however I have spare width. How to I make it move over to the right creating a new column when the height is maxed out on the other column? Hope this makes sense.

At the moment it just displays down to the 14 item then because I have overflow:hidden on the containing DIV it cuts the rest off.

Answer 1

you could use floats

try this, it will print out your list items horizontally from ltr (default direction) and drop to next line – vertically.

<li style="display:inline;"> contents </li>

alternatively, make your loop count 14 rows, then at 14th, close your UL/OL tag and create a new one like so:

<ul style="display:block; float:left;">
<?php
for($i = 0; $i = count($results); $i++) {
    $txt = $results['txt']; // or however you do
    $txt2 = $results['txt2']; // or however you do
    if($i > 0 && $i % 14 == 0) echo '</ul><ul style="display:block; float:left;">';
    echo "<li> <a class='bodylinks' href='http://domain.co.uk/fish/$txt2/'>$txt</a> </li>";
?>
</ul>