Displaying UL data in 3 uneven columns - php

Question

I have a MySQL query that I am saving to a variable to output on the page. I have the data in an unordered list, but I am trying to split the data into three columns using 3 unordered lists floated left. Here is my current code:
$sqlCommand =
"SELECT list_specialty.id, list_specialty.specialty FROM list_specialty
ORDER BY list_specialty.specialty ASC";
$query = mysqli_query($myConnection,$sqlCommand) or die (mysqli_error($myConnection));
$specialtyDisplay = '';
$num = mysqli_num_rows($query);
$split = intval($num/3); //number of items in every column
$i = 0;
while ($row = mysqli_fetch_array($query)) {
$specialtyid = $row["id"];
$specialtyname = $row["specialty"];
$specialtyDisplay .=
'<li>' . $specialtyname . '</li>';
$i++;
if ($i == $split) {
$specialtyDisplay .= '</ul> <ul>';
$i = 0;
}
}
This code works GREAT as long as my data is exactly divisible by 3 (equal columns).
However, when my total number of rows is not divisible by 3, the above code won't work.
I need a solution that will balance the columns, so I can have either 3 equal columns, one extra element in the first column, or one extra element in the first and second column.
What do I need to change in my code to account for that?

Answer 1

This will work:
set $split to the length of the longest column
rows have 0, 1 or 2 columns that are longer by one element. -> $longcols = $num % 3
substract 1 from $split when column number $longcols is printed (unless all columns have equal length)
Implemented in the code:
$num = mysqli_num_rows($query);
$split = ceil($num/3); // 1.
$i = 0;
$col = 1; //for counting columns
$longcols = $num % 3; // 2.
while ($row = mysqli_fetch_array($query)) {
$specialtyid = $row["id"];
$specialtyname = $row["specialty"];
$specialtyDisplay .=
'<li>' . $specialtyname . '</li>';
$i++;
if ($i == $split) {
$specialtyDisplay .= '</ul> <ul>';
if( $longcols != 0 && $longcols == $col ) { $split--; } // 3.
$i = 0;
$col++; //increase columns count
}
}
The lines with comments are those that I have changed/inserted.

Answer 2

If you are going to support better browsers, you can use CSS 3 Multicolumns. It doesn't require you to split. Just CSS does the magic.
div#multicolumn {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Screenshot:
CSS3 MultiColumn http://css.flepstudio.org/images/css3/css3-multi-column.jpg