Question

I’m having an issue here, I am trying to get all the titles from my database and list them in alphabetial order with the first letter indicating where we are at, so to be more clear:

A:
 Animal
 Alex
B:
 Boo
C:
 Crap

Actually this is what I use, and it works perfect:

<?php

$conn = mysql_connect('localhost','user','pw') or die(mysql_error());
$db = mysql_select_db('dbname') or die(mysql_error());

$sql = "select * from games order by title";
$result = mysql_query($sql, $conn) or die(mysql_error());

while ($list = mysql_fetch_array($result)) {

$letter = strtoupper(substr($list['title'],0,1));

if ($letter != $prev_row) {
echo "<br><b><u>$letter</u></b><br>";
} 
echo '<li><a href="/play/id/' . $list['id'] . '/">'.$list['title'].'</a></li>';

$prev_row = $letter;
} // end while
?>

But I would like it so, when it reaches the end of my div, let’s say 400px height, it starts on a new column like:

A:                             C: 

Alien                         Crap

B:                             D:

Boo                           Dododododo

I am really clueless at the moment, so any help would be really aprreciated!

Thanks alot

Answer 1

As columns are not yet broadly supported in HTML you’ll have to count the lines printed and multiply them by your defined line height.

<?php

$conn = mysql_connect('localhost','user','pw') or die(mysql_error());
$db = mysql_select_db('dbname') or die(mysql_error());

$sql = "select * from games order by title";
$result = mysql_query($sql, $conn) or die(mysql_error());
echo "<div style='float:left;height:400px;width:150px;'>";
$current_height = 0;
$line_height = '12px'; // replace by your value

while ($list = mysql_fetch_array($result)) {

$letter = strtoupper(substr($list['title'],0,1));

if ( $current_height >= (400 - 2 * (int) $line_height) ) {
echo "</div><div style='float:left;height:400px;width:150px;'>";
$current_height = 0;
}
if ($letter != $prev_row) {
echo "<br><b><u>$letter</u></b><br>";
$current_height += (int) $line_height;
} 
echo '<li><a href="/play/id/' . $list['id'] . '/">'.$list['title'].'</a></li>';
$current_height += (int) $line_height;

$prev_row = $letter;
} // end while
echo "</div>";
?>