Correct floating list-items

Question

I want to slide blue elements to the right and gray elements to the left. The list-items must be ordered one under another.

Here is the example image link to explain what I mean:

Any help appreciated.

.chat {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;

}
.chat li {
  margin-bottom: 15px;
  padding: 10px 20px;
  border-radius: 20px;
}
.chat li:nth-child(odd) {
  float: right;
  background-color: #52adf4;
  color: #fff;
}
.chat li:nth-child(even) {
  float: left;
  background-color: #e9e7e8;
  color: #333;
}

<ul class="chat">
<li>Hi Joe</li>
<li>Hi, how're u?</li>
<li>Fine, how's it going bro?</li>
<li>Thanks as usual</li>
</ul>

Answer 1

All you need is to clear after floated elements. Add clear: both to LIs.

.chat {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;

}
.chat li {
  margin-bottom: 15px;
  padding: 10px 20px;
  border-radius: 20px;
  clear: both;
}
.chat li:nth-child(odd) {
  float: right;
  background-color: #52adf4;
  color: #fff;
}
.chat li:nth-child(even) {
  float: left;
  background-color: #e9e7e8;
  color: #333;
}

<ul class="chat">
<li>Hi Joe</li>
<li>Hi, how're u?</li>
<li>Fine, how's it going bro?</li>
<li>Thanks as usual</li>
</ul>

You style messages by even/odd, but you forget to situation when someone send more than one message. Than you need to use classes (eg. incoming, outgoing) to differ blue/grey messages.

The point of clearing stays.