Trouble forcing text to wrap - html

Question

I am attempting to put several messages in a thread-like layout. To see the result of what I have, go here: http://jsfiddle.net/sunjay03/Aykqc/embedded/result/
If you adjust the width of the screen, you will see that the text in the lower message does not layout properly. As well as that, I can't seem to get the date to always go to the very right of the screen.
Here is the link to the full jsfiddle: http://jsfiddle.net/sunjay03/Aykqc/
Here are some images of what I'd like to happen:
Any help?

Answer 1

I fiddled around with your fiddle and made this of it:
http://jsfiddle.net/S7drj/1/
HTML:
<div class="messages">
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>John Smith</h3>
</div>
<div class="message-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="message">
<div class="message-image">
<img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
</div>
<div class="message-body">
<div class="message-name">
<span class="message-date">Nov. 15, 2010</span>
<h3>Joe Smith</h3>
</div>
<div class="message-text">
<p>Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</p>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 20px;
}
.message
{
padding: 2px;
margin: 2px;
clear: both;
width:100%;
}
.message .message-image
{
padding: 5px;
float:left;
}
.message .message-body
{
}
.message .message-body .message-name
{
}
.message .message-body .message-name h3
{
}
.message .message-body .message-text
{
}
.message .message-body .message-date
{
float: right;
}
Is that how you want it?

Answer 2

How's this jsFiddle?
HTML:
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
<div class="name">John Smith</div>
<div class="date">Nov. 15, 2010</div>
<div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
CSS:
.name {
float:left;
}
.date {
float:right;
}
.content {
clear:both;
}
.container {
overflow:auto;
padding-left:115px;
background: url(http://www.sunjay.ca/images/logo_notext.gif) no-repeat;
min-height: 110px;
margin-bottom: 20px;
}