How to make a contributors page horizontal

Hi,

I dont know if there is a default contributors page provided by the theme.
I have created a contributors page in wordsville.in from the following code by changing css file by adding:-

/* ------------------------------------------------------------------------- *
 *  Contributors Page
/* ------------------------------------------------------------------------- */
#authorlist li {
float: left;
margin: 0 0 5px 0;
display: inline;
}

#authorlist img.photo {
width: 40px;
height: 40px;
float: left;
display: inline;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
float: left;
display: inline;
}

and by editing functions.php file and adding:-

/*  Contributor Page
/* ------------------------------------ */
function contributors() {
global $wpdb;
$column_count = 0;
$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");
foreach($authors as $author) {
$column_count++;
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
if ($column_count == 3) {
        $column_count = 0;
        echo '<br>';
    }
}
}

I also created a custom page template and added the following:
<div id="authorlist"><ul><?php contributors(); ?></ul></div>

My aim was to put the author images and name horizontally(3 in a line then next line and so on) but its showing vertically.

How to do it. I am not understanding. Please help.