How can I fit a div to its content and align it to the right?

Question

I am trying to make a simple chat application and can't seem to display the chat text belonging to one user stick to the left while the other user's message sticks to the right.

Here is a sample of the code:

.chat-session {
  width: 400px;
  height: 400px;
  border: 1px solid #aaaaaa;
  padding: 1%;
}

.user1 {
  padding: 0 2px 2px 2px;
  border: 1px solid #09aedc4f;
  border-radius: 3px;
  background-color: #09aedc4f;
  margin-bottom: 2px;
}

.user2 {
  padding: 0 2px 2px 2px;
  text-align: right;
  border: 1px solid rgba(0, 128, 0, 0.493);
  background-color: rgba(0, 128, 0, 0.493);
  margin-bottom: 2px;
  border-radius: 3px;
}

<div class="chat-session">
    <div class="user1">Hello</div>
    <div class="user2">Hi</div>
    <div class="user1">What's up?</div>
    <div class="user2">Not much</div>
</div>

I would like the divs to fit the text size and user2's div to align right. I have tried display: inline-block; to fit the divs, but that just displays them all on the same line. I have also tried float: right; and float: left; but that also displays them on the same line.

Can someone help?

display:table + margin-left:auto to push the ones to the right — Temani Afif, Aug 22 '21 at 19:31

score 2 · Answer 1 · answered Aug 22 '21 at 18:33

Your can put your message tag in another tag with text-align property

.chat-session {
  width: 400px;
  height: 400px;
  border: 1px solid #aaaaaa;
  padding: 1%;
}

.user1 {
  display:inline;
  padding: 0 2px 2px 2px;
  border: 1px solid #09aedc4f;
  border-radius: 3px;
  background-color: #09aedc4f;
  margin-bottom: 2px;
}

.user2 {
  display:inline;
  padding: 0 2px 2px 2px;

  border: 1px solid rgba(0, 128, 0, 0.493);
  background-color: rgba(0, 128, 0, 0.493);
  margin-bottom: 2px;
  border-radius: 3px;
}
.message-right{
  position: relative;
  width: 100%;
  text-align: right;
}

.message-left{
  position: relative;
  width: 100%;
  text-align:left;
}

<div class="chat-session">
    <div class="message-left"><div class="user1">Hello</div></div>
    <div class="message-right"><div class="user2">Hi</div></div>
    <div class="message-left"><div class="user1">What's up?</div></div>
    <div class="message-right"><div class="user2">Not much</div></div>
</div>

score 2 · Accepted Answer · answered Aug 22 '21 at 19:31

you could use display with the table-layout algorithm to shrink element to its content, then max-width and margin-left:auto

.chat-session {
  width: 400px;
  height: 400px;
  border: 1px solid #aaaaaa;
  padding: 1%;
}

.chat-session>* {/* Update */
  display: table;/* for infos : okay with any browser for ages and only from IE8 for MSIE */
  max-width: 100%;
}

.user1 {
  padding: 0 2px 2px 2px;
  border: 1px solid #09aedc4f;
  border-radius: 3px;
  background-color: #09aedc4f;
  margin-bottom: 2px; 
}

.user2 {
  padding: 0 2px 2px 2px;
  text-align: right;
  border: 1px solid rgba(0, 128, 0, 0.493);
  background-color: rgba(0, 128, 0, 0.493);
  margin-bottom: 2px;
  border-radius: 3px;
  margin-left: auto/* Update */
}

<div class="chat-session">
  <div class="user1">Hello</div>
  <div class="user2">Hi</div>
  <div class="user1">What's up?</div>
  <div class="user2">Not much</div>
  <div class="user1">What's up? What's up? What's up? What's up? What's up if there a long text here?</div>
  <div class="user2">Not much</div>
</div>

Thanks man, that solved it! – joao_lucas Aug 22 '21 at 21:28 — joao_lucas, Aug 22 '21 at 21:28

How can I fit a div to its content and align it to the right?

2 Answers2