Sanjeev K Sanjeev K - 2 months ago 5
CSS Question

DIV position and alignment issue

I am trying to create a chat window as per the attachment below:

chat window

This is what I have created in JSFiddle:

I am trying to make the blue

DIV
where payment information is in center and the top div in the left, I am able to make the first div in left easily, but cant bring the payment
DIV
in the center, not sure what I am missing

Here is the code as well





<style>
.chat_widget_body{float:left; width:100%; min-height:550px; padding:25px; box-sizing:border-box;}
.chat_widget_bubble_green{background:#c5d6b6; float:left; display:inline-block; padding:15px; border-radius:6px; position:relative;font-family: "Montserrat-Regular"; font-size:15px; font-weight:400; color:#404040;}
.chat_widget_bubble_green:after {right: 100%; top: 70%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(197, 214, 183, 0); border-right-color: #c5d6b7; border-width: 12px; margin-top: -12px;}
.chat_widget_bubble_green > .msg_time{font-size:11px; float:left; width:100%; text-align:right; padding:10px 10px 0 10px; box-sizing:border-box; color:#6f6f6f;}
.chat_widget_notification{display:inline-block; margin:0 auto; padding:10px; border-radius:6px; font-family: "Montserrat-Regular"; font-size:15px; background:#d9efff; border:1px solid #b7ccdb; color:#404040; clear:both;}
.chat_widget_footer{float:left; width:100%;}
</style>

<div class="chat_widget_body">
<div class="chat_widget_bubble_green"> Too much headache since last night. Please guide me
<div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i></div>
</div>
<div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
</div>
<div class="chat_widget_footer"></div>




Answer

you need to set float: right in your .chat_widget_notification, along with a few tweaks

EDIT OP Comment:

can we make that blue box centered?

set display:block instead of inline-block and give some width in your .chat_widget_notification

.chat_widget_body {
  float: left;
  width: 100%;
  min-height: 550px;
  padding: 25px;
  box-sizing: border-box;
  border: dashed black 1px
}
.chat_widget_bubble_green {
  background: #c5d6b6;
  float: left;
  display: inline-block;
  padding: 15px;
  border-radius: 6px;
  position: relative;
  font-family: "Montserrat-Regular";
  font-size: 15px;
  font-weight: 400;
  color: #404040;
  width: 70%;
  margin: 10px 0
}
.chat_widget_bubble_green:after {
  right: 100%;
  top: 70%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(197, 214, 183, 0);
  border-right-color: #c5d6b7;
  border-width: 12px;
  margin-top: -12px;
}
.chat_widget_bubble_green > .msg_time {
  font-size: 11px;
  float: left;
  width: 100%;
  text-align: right;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  color: #6f6f6f;
}
.chat_widget_notification {
  display: block;
  width: 40%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 6px;
  font-family: "Montserrat-Regular";
  font-size: 15px;
  background: #d9efff;
  border: 1px solid #b7ccdb;
  color: #404040;
  clear: both;
}
.chat_widget_footer {
  float: left;
  width: 100%;
}
</style>
<div class="chat_widget_body">
  <div class="chat_widget_bubble_green">Too much headache since last night. Please guide me
    <div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i>
    </div>
  </div>
  <div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
  <div class="chat_widget_bubble_green">Too much headache since last night. Please guide me
    <div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i>
    </div>
  </div>
  <div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
</div>
<div class="chat_widget_footer"></div>