Avoid text flowing around picture - html

Question

I'm writing a chat and i would like to have the incoming messages on the right and the outgoing on the left. Every message has a user picture, name, messages, time.
My problem is that I can't manage to have the text NOT to flow under the picture.
http://jsfiddle.net/4MVd2/2/
My other questions would be then, how to get the picture on the right to be right from the text without changing the order in the HTML and how to get the username aligned with the top of the picture.
Thank you!

Answer 1

.messagetext{
display:inline-block;
}
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}​
That should get you going. Now you just need to tweak that image, I wasn't sure if you wanted it at the top or bottom, and what not.
http://jsfiddle.net/4MVd2/10/
EDIT: Addressed your image positioning, I didn't see that the first time I read through. This should be what you want.

Answer 2

sorry I entirely missed the question float: right on the css for the image should fix it. http://jsfiddle.net/4MVd2/8/

Answer 3

1) You might want to convert your images to block level elements and give them a high enough bottom border to prevent text from sneaking bellow the images (either way you have a fixed message row height).
.message img {
height: 40px;
width: 40px;
display: block;
}
.incomingMessage img {
float:right;
margin: 0 0 3em 0.8em;
}
.outgoingMessage img {
float:left;
margin: 0 0.8em 3em 0;
}
2) Add a wrapper container around that block of code and float it instead of the image and the message content.

Answer 4

I agree with Chris Sobolewski and learned how to use inline-block from him.One way I used to use is use a class named`clearfix'.
First float your image like this:
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}​
Then add a class clearfix like this :<div class="message incomingMessage clearfix">
And here is clearfix:
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}