How can I left align and right align my chat bubbles? - html

Question

I have created two chat bubbles which one of them I need to be left aligned and other one I need to be right aligned .As of now my css grow both till the end like below image .
As of now I do not want to hardcode the width and want the bubble to grow with chat text and both one should be left aligned and other one should be right aligned like below:
CSS:
.speech-wrapper{
padding: 5px 6px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #075698;
color: #FFF;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.chatbox_other{
height:auto;
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #DCDCDC;
color: #000;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.name_other{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #1970b0;
}
.name_other1{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ba006e;
}
.name_other2{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #007670;
}
.name_other3{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #3b0256;
}
.name_other4{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #00512b;
}
.name_other5{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #a91024;
}
.name_other6{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #b8471b;
}
.name_other7{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #7f1c7d;
}
.timestamp_other{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #fff
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ffffff;
}
.triangle.left-top:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 22px solid;
border-color: #DCDCDC transparent transparent transparent;
z-index: -1;
}
.triangle.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -10px;
top: 0;
bottom: auto;
border: 32px solid;
border-color: #075698 transparent transparent
transparent;
z-index: -1;
}
.alt{
margin: 0 0 0 60px;
}
HTML:
<div class="speech-wrapper">
<div class="chatbox triangle right-top alt">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div>
</div>
<div class="speech-wrapper">
<div class="chatbox_other triangle left-top">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span>
</div>
</div>
</div>
</div>
I have tried uisng float left but while reducing the windows size the chat started overlapping on eachother
For testing out try below link
https://codepen.io/rajesh-kumar-dash/pen/KbvqQX

Answer 1

I think using float: right; for the right bubble and for the left bubble: float: left; with width: auto; should work

Answer 2

The "dirty" way to do it is by adding a after the divs just to clear the float:
<div class="speech-wrapper"><div class="chatbox triangle right-top alt"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
<div class="speech-wrapper"><div class="chatbox_other triangle left-top"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
The cleaner way to do it is called "Clearfix". I suggest you take a look on these two links to understand it and use on your code:
https://www.w3schools.com/css/css_float.asp
https://css-tricks.com/snippets/css/clear-fix/

Answer 3

If you want the size of your box as large as the text in it, you have to set "display: inline-block";
To make sure your box wont get bigger then a certain size use "max-width".
With "overflow-wrap: break-word" your text breaks if it reaches the max-width.