How to align <div class=container> in a message style format?-CodePudding

I am trying to reproduce a message thread format. One container that starts on the left side of the screen (incoming messages) and another container that starts on the right side of the screen (outgoing messages). Currently both containers are centered on the page and the text inside them is printing correctly (left side and right side respectively). I do not want the text position to change, only the container locations. Ideally, I would like it to look like this:

                                             
          Container                          
                                             
                                             

                                                                           
                                                          Container darker

Here is my code so far:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,">
<meta charset="UTF-8">
<style>
body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

</style>
</head>
<body>

<h2>Chat Messages</h2>

<div >
<p>'(123)456-7890'</p>
<p>'Hello!'</p>
<p>'10/10/2022 @ 15:00:00'</p>
</div>

<div >
<p>'(123)456-0987'</p>
<p>'Hi!'</p>
<p>'10/10/2022 @ 15:00:07'</p>
</div>

</body>\n
</html>

CodePudding user response：

Just set margins on the side where you want the space.

But you should use class names that describe what an element represents, not how it should look.

body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.message {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.outgoing {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right;
  margin-left: 20%;
}

.incoming {
  margin-right: 20%;
}

<h2>Chat Messages</h2>

<div >
  <p>'(123)456-7890'</p>
  <p>'Hello!'</p>
  <p>'10/10/2022 @ 15:00:00'</p>
</div>

<div >
  <p>'(123)456-0987'</p>
  <p>'Hi!'</p>
  <p>'10/10/2022 @ 15:00:07'</p>
</div>

CodePudding user response：

You can use CSS flexbox with column direction on the parent element (in this case, I've created div.wrapper) and then use align-self: flex-end for the elements that you want flush right.

To ensure that the message is "shrink-wrapped", you can optionally use width: fit-content on top of specifying a max-width:

.wrapper {
  display: flex;
  flex-direction: column;
}

.message {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  max-width: 65%;
  width: fit-content;
}

.message.align-right {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right;
  align-self: flex-end;
}

<div >
  <div >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed pretium sem, et blandit quam.
  </div>
  <div >
    Sed et ullamcorper magna.
  </div>
  <div >
    Nullam vulputate turpis lorem, id malesuada purus consectetur quis.
  </div>
  <div >
    Phasellus mattis ante dolor, sit amet blandit enim rhoncus id.
  </div>
  <div >
    Aenean eu mauris ac sem blandit mollis. Praesent feugiat ex vel risus vulputate, vitae dictum ex posuere.
  </div>
</div>

CodePudding user response：

Wrap all containers in another div with a style (used the class thread)
Define a width lower than 100% in container class
Define align-self in darker class

<head>
  <!-- ... -->
  <style>
    /* ... */
    .thread {
      display: flex;
      flex-direction: column;
    }
    .container {
      /* ... */
      width: 80%;
    }
    .darker {
      /* ... */
      align-self: flex-end;
    }
    /* ... */
  </style>
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div >
    <div >
      <!-- ... -->
    </div>
    <div >
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
</body>