How to best alternate chat bubbles positioning with CSS?

Question

The section of code that I am using is shown below and it shows all the bubbles on the left side, i.e. either the one sent by the user "friend" or by the user "self".

As you can see, I've tried it with float, but when using relative/absolute positioning between parent and child divs, everything was being overlapped as I did not know what to do with the height.

Thanks in advance for your help!

P.S.: I am using Bootstrap.

                    <div class="row no-gutters">
                        <div class="chat-bubble-container ">
                            <div class="chat-bubble msg-self">
                                Lorem ipsum!
                            </div>
                        </div>
                    </div>
                    <div class="row no-gutters">
                        <div class="chat-bubble-container">
                            <div class="chat-bubble msg-friend">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
                            </div>
                        </div>
                    </div>



.chat-bubble-container {
  width: auto;
}

.chat-bubble {
  font-size: 1.4rem;
  padding: 1rem 1.4rem;
  margin: 1rem 3rem;
  border-radius: .9rem;
}

.msg-friend {
  color: white;
  background-color: grey;
}

.msg-self {
  color: white;
  background-color: pink;
}

I'm not very sure about this, but can't you use something like `margin-left: auto` ? — Trisma, Sep 08 '19 at 16:21

user9408899 · Accepted Answer · 2019-09-08T16:44:17.207

2

You can use margin-left: auto; and margin-right: auto; properties to achieve that layout.

.chat-bubble-container {
  display: flex;
  width: 100%;
}

.chat-bubble {
  font-size: 1.4rem;
  padding: 1rem 1.4rem;
  margin-top: 1rem;
  margin-bottom: 1rem; 
  border-radius: .9rem;
  width: auto;
  max-width: 300px;
}

.msg-friend {
  color: white;
  background-color: grey;
  margin-left:3rem;
  margin-right: auto;
}

.msg-self {
  color: white;
  background-color: pink;
  margin-right:3rem;
  margin-left: auto;
}

<div class="row no-gutters">
  <div class="chat-bubble-container ">
    <div class="chat-bubble msg-self">
      Lorem ipsum!
    </div>
  </div>
</div>

<div class="row no-gutters">
  <div class="chat-bubble-container">
    <div class="chat-bubble msg-friend">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
    </div>
  </div>
</div>

edited Sep 08 '19 at 16:44

answered Sep 08 '19 at 16:22

user9408899

4,202
3
19
32

Thanks but I'm afraid I'm still not achieving that layout. There's only a slight change in the margin but it does not take the chat bubbles to the opposite extremes of the chat container – GBeck Sep 08 '19 at 16:38
1

Updated my answer. Added `width:100%` to the container, and made small changes in `.chat-bubble`. Please try and let me know the result. @Fergo – user9408899 Sep 08 '19 at 16:46
Exactly what I needed! Thanks! – GBeck Sep 08 '19 at 17:03

How to best alternate chat bubbles positioning with CSS?

1 Answers1