how to block the message box - html

Question

We developing chat application. in that input and out text message is coming.but input and out put is coming side by side but i need one by one.like if input is single later then that line total block then out put will come short or long text it should be come text line only but i am not able to getting that and message box corners are coming different any one please help me
This is we are facing please find screen shot
we need like this and corners are not coming same i need input user message how it is coming we need customer message box corner like that
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: right;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
right: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
}
.userTextDivOp::before {
left: -18px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 14px solid transparent;
border-top: 6px solid #999;
}
.userTextDivOp::after {
left: -6px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: 0px;
border: 9px solid transparent;
border-top: 4px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

Answer 1

you just need to wrap the message divs in a new div with a width:98%.
so that new message comes after the first one.
Thanks
.message-block{
width:98%;
height:auto;
overflow:hidden;
position:relative;
padding:0px 10px;
}
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
border-top:2px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: right;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -2px;
right: -10px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0.01em;
right: -6px;
border: 9px solid transparent;
border-top: 10px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
}
.userTextDivOp::before {
left: -14px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 11px solid transparent;
border-top: 10px solid #999;
}
.userTextDivOp::after {
left: -9px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -0.09em;
border: 10px solid transparent;
border-top: 9px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="message-block">
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
</div>
<div class="message-block">
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
</div>
<div class="message-block">
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
</div>
<div class="message-block">
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
</div>

Answer 2

A simple solution for you is to set clear: both; instead of clear: right; in the CSS rules of .userTextDiv and of .userTextDivOp.
To solve the corner problem, just c/p the CSS of .userTextDiv:before and after to replace the CSS of .userTextDivOp:before and after and replace right rules by left.
Hope it helps.
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: both;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
right: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
clear: both;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>