Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Align Username Outside The Bubble In Chat?

Post a Comment
I need to put the user's name on top of the message box, just like it is on Messenger, but I'm not getting it, I've tried using position several times and I can't, someone could he

Solution 1: 

.me {
      float: left;
      clear: both;
      color: black;
      margin: 2px;
      padding: 10px;
    }
    p.msgs {
      margin-top: 5px;
      margin-bottom: 0;
      padding: 1rem 2rem;
      border-radius: 30px;
      border: 1px solid #000;
      background-color: yellow;
    }
    p.name {
      margin-bottom: 5px;
      margin-left: 10px;
    }

    .sender-img-box {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      margin-top: auto;
      overflow: hidden;
      margin-bottom: 5px;
    }
    img.sender-img {
      width: 30px;
      height: 30px;
      display: flex;
      vertical-align: bottom;
    }

    div.sender-text {
      margin-left: 10px;
    }
    .msg-box {
      display: flex;
      flex-direction: row;
    }
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="me">
      <p class="name">Alex</p>
      <p class="msgs">This is a hidden message</p>
    </div>
    <div class="me">
      <p class="name">David</p>
      <p class="msgs">This is my first message</p>
      <p class="msgs">This is my second message</p>
    </div>

    <div class="me msg-box">
      <div class="sender-img-box">
        <img class="sender-img" src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          alt=""
        />
      </div>
      <div class="sender-text">
        <p class="name">Alex</p>
        <p class="msgs">This is a hidden message</p>
      </div>
    </div>
  </body>
</html>

Solution 2:

Just surround it in another layer of <div> like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="messagecontainer">
John Doe<br>
    <div class="me">
        <span>This is a hidden message</span>
    </div>
</div><br><br><br>

    <div class="messagecontainer">
    Jane Doe<br>
        <div class="me">
        <span>Please tell me how to make it</span>
    </div>
    </div><br><br><br>

</body>
</html>

Gives the following result:

.me{
        float: left;
        clear: both;
        color:black;
        background-color:yellow;
        margin:2px;
        border-radius:30px;
        padding: 10px;
        display: inline-block;
       
       
    }
.messagecontainer{
  text-align:start;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="messagecontainer">
John Doe<br>
    <div class="me">
        <span>This is a hidden message</span>
    </div>
</div><br><br><br>

    <div class="messagecontainer">
    Jane Doe<br>
        <div class="me">
        <span>Please tell me how to make it</span>
    </div>
    </div><br><br><br>
        <div class="messagecontainer">
    Aniox<br>
        <div class="me">
        <span>Ok</span>
    </div>
    </div><br><br><br>

</body>
</html>

Post a Comment for "How To Align Username Outside The Bubble In Chat?"