CODEWITHSUNDEEP
htmlcss
Rajesh Kumar Dash
Rajesh Kumar Dash

Reputation: 2277

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

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 .

enter image description here

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:

enter image description here

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

Upvotes: 1

Views: 5277

Answers (3)

cozyCoding
cozyCoding

Reputation: 1

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.

Upvotes: 0

Arno van Liere
Arno van Liere

Reputation: 107

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

Upvotes: 0

vinyluis
vinyluis

Reputation: 23

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/

Upvotes: 0

Related Questions