David Jonadab Rivera Ortiz David Jonadab Rivera Ortiz - 2 months ago 11
CSS Question

How to make divs to behave like the msg boxes in hangout or facebook chat?

It is hard to me to explain, but i am trying to do something like this:

msg me...............

............msg other

msg me...............

msg me...............


the msg have different width, so i need it to fill the space in the left and right with margin or something, i am trying something like this:

<div class="container">
<div class="msg-me">
<span>msg me msg me msg me msg me msg me msg me msg me msg me</span>
</div>

<div class="msg-other">
<span>msg other msg other msg other msg other msg other msg other </span>
</div>

<div class="msg-me">
<span>msg short</span>
</div>

<div class="msg-other">
<span>msg short</span>
</div>




then i am trying to float them to left and right, but it does get shorts msg in the same line and i have no idea how to keep every one in a different line. They look like this:

msg me........msg other

....msg other msg other


How can i make every div to be in a different line? Also the width of the divs need to adjust to the content. The best example of what i want to accomplish is hangout or facebook.

Here is a jsfiddle:
https://jsfiddle.net/mLa570ut/

Answer

Add this to your CSS

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

And for your HTML, add <div class="clearfix"></div> after every .msg-me and .msg-other

<div class="container">
    <div class="msg-me">
        <span>msg me msg me msg me msg me msg me msg me msg me msg me</span>
    </div>
    <div class="clearfix"></div>

    <div class="msg-other">
        <span>msg other msg other msg other msg other msg other msg other </span>
    </div>
    <div class="clearfix"></div>

    <div class="msg-me">
        <span>msg short</span>
    </div>
    <div class="clearfix"></div>

    <div class="msg-other">
        <span>msg short</span>
    </div>
    <div class="clearfix"></div>
</div>

About .clearfix:

This CSS class cleanses the after effect of float attribute which caused the weird structure that you see.