Force push a floated <div> below another floated <div>

Question

Visit for my sample: http://codepen.io/anon/pen/qKBfE

here is the css code as well:

.bubble
{
text-align:left;
color:white;
float:left;
position: relative;
padding: 10px;
background: #95a5a6;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-left: 5px solid #e67e22;
margin-bottom:2%;
margin-top:2%;
margin-right:300px;
}

Theres alot of useless code in there but please reference just the divs with

class="bubble" | class="bubble2"

As you can see this is a chat box with custom chat bubbles, my "bubble" class is the host and the "bubble2" class is the client.

When "bubble" types in multiple messages they are not stacked rather they are displayed inline and only sometimes stack.

How can i make sure that the each bubble pushes the other one down and floats left for the host and floats right for the client.

Answer 1

Adding

clear:both;

As the first line for both .bubble and .bubble2 fixes it for me? Is this what u want?

.bubble2
{
  clear: both;
}

.bubble
{
  clear: both;
}