Text not going underneath other portion of text - html

Question

My text does not seem to want to go underneath this portion of text!
http://prntscr.com/1x2zju
No matter how hard we try to get it to go under it, it doesn't go below it.
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
float: left;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
float: auto;
}
HTML:
<div id='post'>
<img class='avatar' src='http://cppsgang.com/images/person.png'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
Thanks!
http://jsfiddle.net/QUFx5/

Answer 1

EDIT WITH WORKING
JSFIDDLE
HTML
<div id='post'>
<img class='avatar' src='http://lorempixel.com/output/people-q-c-35-35-9.jpg'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
CSS
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin: 0;
padding-left: 45px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 5px;
padding-left:45px;
margin:0;
}

Answer 2

I have tried with your jsfiddle.net.
This thing worked for me:
.avatar {
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
}
I have removed float from name and text class. Also, increased the width & height of avatar to 50px each.
The new code I tried which works according to your requirement:
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-top:-15px;
}