CODEWITHSUNDEEP
htmlcsschat
Don't Know
Don't Know

Reputation: 131

Creating a chatbox and can't position chat messages on the right. Also, adding border creates unnecessary height.

I'm trying to make a simple chatbox. Until I add border It looks fine (width and height wise)

Chat message example

But when I add border: solid 1px gray, I get:

Chat message example 2

What causes this?

Also I'm trying to position messages sent by the user on the right with float: right:

Full chat box screenshot

However, as you can see, the next message sent ends up on the same line.

Thanks in advance!

Link to fiddle

Upvotes: 0

Views: 275

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Updated HTML and CSS ... See updated fiddle

<div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="clearfix">
    <div class="message me">
      <p>Hello</p>
    </div>
 </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
  <div class="message">
    <p>Hello</p>
  </div>
</div>

Extra CSS 

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.message p {
   margin: 0; 
}

Upvotes: 1

Related Questions