I am currently working on adjusting the alignment of my chat box app. I have placed 3 div elements with the class .bubble inside a div with the class .chatlines, but they appear to be clustered together instead of aligned properly. It's challenging to describe, so please take a look at the code and example image provided below.
Any suggestions or examples to help me correct the alignment would be greatly appreciated. Thank you, stewy!
}
body {
background-color: grey;
margin: 0px;
font-family: Arial;
color: darkgrey;
font-size: 12px;
line-height: .3;
letter-spacing: .5px;
}
/*.............. chatlins ..............*/
.chatlines {
position:fixed;
min-height: 250px;
bottom: 110px;
width: 80%;
left: 50%;
transform:translateX(-50%); /* center */
}
.bubble {
position: absolute;
height: 50px;
max-width: 250px;
padding: 10px 15px;
border-radius: 20px 20px 20px 0px;
background-color: rgba(0, 0, 0, .3);
}<div class="chatlines">
<div class="bubble" align="left" style="padding-bottom: 10px;height: 60px;">Bubble3</div>
<div class="bubble" align="right" style="padding-bottom: 10px;height: 60px;">Bubble2</div>
<div class="bubble" align="left" style="padding-bottom: 10px;height: 60px;">Bubble1</div>
</div>