<div class="container"> <div class="msgUser">User1</div> <div class="content">Hey, what is going on over there? I don't understand what you are trying to say</div> <div class="msgTime">7:50 pm</div> </div> <div class="container"> <div class="msgUser">User2</div> <div class="content">Huh? Are you talking to me? I need to write some more lines to see how this stacks and wraps</div> <div class="msgTime">7:48 pm</div> </div>
.container { border:solid 1px #DEDEDE; background:#EFEFEF; color:#222222; padding-top: 1px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; font-family: arial,sans-serif; overflow:auto; } .content{ background:#EFEFEF; color:#222222; padding-top: 1px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; font-family: arial,sans-serif; } .content { border:solid 1px #DEDEDE; padding-top: 25px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } .msgTime { font-size:10px; float: right; } .msgUser { position:fixed; font-size:10px; float: left; }