I am currently facing the following situation, which I will illustrate with images:
1st scenario: In the image below, there is a small text and I have encountered an issue. The edge of my list does not align properly with the picture. I would like it to always be aligned with my message, regardless of its size.
2nd scenario: When dealing with a very long text, it overflows instead of wrapping around the image.
The desired outcome should be as follows:
I believe some adjustments are needed in my CSS, as I am not an expert on the subject. Could someone provide assistance? You can view my jsFiddle file HERE JSFIDDLE DEMO. Thank you for your time and help :)
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;
}