Display - Text side image with div inside on <li>

Question

I have the following situation (I express with images):

1st situation: In the image below has a small text, and already meet the first problem. The edge of my list is not obeying the picture too: (. Wish she always fell short of my message, regardless of message size.

2nd situation: When we have a very long text, it does not obey he ends up falling (not getting to the side of the image)

The result I expect is the following:

Must be some alignment in my css as'm no expert on the subject just know my way around with some things. Someone manages to come help me? Follow my file jsFiddle. Already very grateful for the time invested it :) HERE JSFIDDLE DEMO

 li {

    border-bottom:1px solid gray;
     text-align: left;
    display:block;
}
.chat-window-user-img > img {
    height:50px;
    width:50px;
    float:left;
    padding:5px;
}
.chat-window-user-message{
   direction: ltr;    
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   border-collapse: collapse;
   border-spacing: 0;

}

Answer 1

Both problems can be solved with overflow: auto, a useful trick I only recently picked up:

Add to .chat-window-user-message:

display: block;
overflow: auto;

^{(A <div> would also have worked, instead of display: block)}

And to li:

overflow: auto;

Example: http://jsfiddle.net/L6Pwq/14/
See also: CSS: Clearing Floats with Overflow