CSS positioning issue for chat conversation

Question

I'm having issues with my CSS positioning for a conversation/chat page. Please see the code in this fiddle for my first attempt: https://jsfiddle.net/1gsykwL5/

Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.

I think there's probably a better way of coding it to be honest. But I'm not sure how. Can anybody please advise?

Thanks!

PS - code which includes the padding fix by Rick Jelier:

body{
    font-family:arial;
}

.newchat {  
    padding: 10px;
}
.newdiv1 {
    width: 50px;
    height:100%;
    float: left;    
    margin: 0px 10px 10px 0px;
}

.chat2 ul{
    list-style: none;
    padding:0px;
}

.chat2 ul li
{
    border-radius: 5px;
}

.chat2 ul li:hover .thumbnail {
    background: #bd6982;
}

.chat2 ul li .thumbnail {
    display: inline-block;
    background: #bfbfbf;
    width: 50px;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s;
    transition: background 0.3s linear 0s;
    border-radius: 50%;
}

.chat2 ul li:nth-child(2n) {
    background: #f2f2f2;
}

.newdiv2 .meta {
    color: #b3b3b3;
    font-size: 12px;
     padding-left: 60px;
}



.newdiv2 .meta a:hover {
    text-decoration: underline;
}
.newdiv2 .meta a {
    color: #999999;
    text-decoration: none;
}

.newdiv2 h3 {
    font-size:14px;
    display: block;
    width: 100%;
    margin: 0px 0px 5px 0px;
    color: #808080; 
}

.newdiv2
{
    font-size:12px;
    color: #cccccc;
}

.newdiv2 .preview
{
    display:block;
    margin-bottom: 5px;
     padding-left: 60px;
}

.otherUser
{
    margin-left:30px;
}

<div class="chat2">
<ul>
    <li>
        <div class="newchat">
            <div class="newdiv2">
                <div class="newdiv1">
                    <a class="thumbnail" href="#">KS</a>
                </div>              
                <h3>Kenny Sing</h3>
                <span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
                      idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi iusdh fius dhuif hsdiuf hisdu fhusid f2f2f2 siudphf uisd h
                       osih doifh sidoh fiusd hiuf hdsiu hiu hiu</span>
                <div class="meta">3h ago · <a href="#">Category</a> · <a href="#">Reply</a></div>
            </div>
        </div>
      </li>
      <li class="otherUser">
        <div class="newchat">
            <div class="newdiv2">
                <div class="newdiv1">
                    <a class="thumbnail" href="#">KS</a>
                </div>          
                <h3>Kenny Sing</h3>
                <span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
                      idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi</span>
                <div class="meta">3h ago · <a href="#">Category</a> · <a href="#">Reply</a></div>
            </div>
        </div>
      </li>
     </ul>
</div>    

Answer 1

Less code more fun

Since you asked for leaner markup, this is how I'd approach it:

body {
  background-color: #333;
}
.chat {
  list-style-type: none;
}
.meta-message {
  display: block;
  color: #999;
  margin-top: 5px;
}
.sender-message,
.reply-message {
  background-color: #fff;
  border-radius: 15px;
  display: block;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.25;
  max-width: 400px;
  margin-bottom: 15px;
  min-height: 60px;
  padding: 15px 15px 15px 80px;
  position: relative;
}
.sender-message::before,
.reply-message::before {
  content: attr(data-shortname);
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #a00;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
.sender-message .name,
.reply-message .name {
  color: #a00;
  font-size: 28px;
  margin: 0;
  text-align: right;
}
.reply-message {
  background-color: #eee;
  margin-left: 80px;
}
.reply-message .name {
  color: #0a0;
}
.reply-message::before {
  background-color: #0a0;
}

<ol class="chat">
  <li class="sender-message" data-shortname="kk">
    <h3 class="name">Kenny King</h3>Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.<span class="meta-message">2016/12/13 12:41 p.m.</span>
  </li>
  <li class="reply-message" data-shortname="cw">
    <h3 class="name">connexo websolutions</h3>Let's see how far we can get from a small codepen snippet...<span class="meta-message">2016/12/13 12:42 p.m.</span>
  </li>
</ol>

https://codepen.io/connexo/pen/eBPXbd

Why did I use an ol?

Because a chat consists of a (typically chronologically) ordered list of messages (where order does matter).

I think you will be able to start from here and get to where you want to go.

Answer 2

I see it in two ways:

1. position absolute of logo (+ top:10px, left:10px), and padding left + position relative to the container - with padding it shouldn't screw up your your alignment

or

2. Padding to the message container and negative margin to the logo

   .newchat { padding-left: 70px; } .newdiv1 { margin: 0px 10px 10px -60px; }

Answer 3

Try adding 60px of padding to the left of the textbox itself:

.newdiv2 .preview {
    /* current css */
    padding-left: 60px;
}

I tried it in the jsfiddle and it seems to work.
Hope this helps!