HTML / CSS问题：div的一部分浮动到下一行，我希望它在同一行

Question

I am loading names/grades from a database which happens perfectly... however, the grade assosciated with the person is for some reason getting floated down to the next line and I can't figure out why, as you can see in this picture: http://i.stack.imgur.com/rqhjp.png

I want that number grade to be on the same line, aligned on the right, but I cant figure out why it's getting pushed down to the next line. Here is my php:

echo '<div class = "name">' . $firstname . " "  . $lastname . "<strong>" . '<p align="right">' . $avg . '</p></strong></div>';

And the CSS it refers to:

}

#content .name{
    background: #FFF;
    float:left; 
    width: 220px;
    padding: 0px;
    position: relative;
    margin: 0px;
    font-size: 1.4em;
    border: 2px solid #CCC;
    border-radius: 10px;
}

Answer 1

Instead of using p and align, put the grade in a span and float it to the right. You can see it working in this fiddle.