[PHP] Alphabetical order help

Question

Hey there,

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

HTML doesn't provide any way to tell the rendered height of text, so there's no way to tell when you need to jump to the second column.

How I've done this in the past is just made an arbitrary decision that, for example, 'A' and 'B' will be in the first column, and 'C, and 'D' are in the second column.

When CSS3 really gets rolling, it has the ability to specify a multi-column layout: http://www.quirksmode.org/css/multicolumn.html

Answer 2

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>";
?>