How do I position the content of a 'while' loop on the top right corner?

Question

I have a list of names that are fetched from a while loop coded in PHP. When I try to display the content of the loop which is embedded in a div, the content gets overlapped. The style I am using for the content is:

<style>
    #cap{
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

Here is the entire code of the loop content along with style of the div in PHP:

<?php
    $result2 = mysql_query("SELECT `player_name` FROM `player_data` WHERE  `team_id`=$team2");

    while($row = mysql_fetch_assoc($result2))
    {
        $name2 = $row['player_name'];
        echo "<div id='cap'>";
        echo "" . $name2 . "<br/>";
        echo "</div>";
    }
?>

How do I get this content $name2 not overlapped?

Answer 1

Something like this:

echo '<div id="cap">';
while($row = mysql_fetch_assoc($result2))
{
    $name2 = $row['player_name'];
    echo '<div class="player">';
    echo $name2;
    echo '</div>';
}
echo '</div>';

Answer 2

Put the div with that CSS outside the loop:

echo '<div id="cap">';
while($row = mysql_fetch_assoc($result2))
{
     $name2 = $row['player_name'];
     echo "" . $name2 . "<br/>";
}
echo "</div>";