Ich habe Chat-Nachricht, wo div fällt

Question

Ich habe Chat-Nachricht div die floatsleft und right aber ich, wenn die Antwort mehr als eine Zeilen ist, dann div fällt.

Bitte überprüfen Sie meine codepen div falling down

Ich möchte diese Ausgabe:

Answer 1

Sie Ihre bubble Schwimmer nicht lassen, anstatt einen linken Rand verwenden.

http://codepen.io/anon/pen/grddmW

edit: ich den Code aktualisiert. Das Gleiche gilt natürlich für die richtigen schwebenden Blasen.

.message .bubble { 
    background: #f0f4f7; 
    font-size: 16px; 
    padding: 12px 13px; 
    border-radius: 5px 5px 5px 0px; 
    color: #717070; 
    position: relative; 
    margin-left: 160px; 
} 

#chat-messages div.message.right .bubble { 
    border-radius: 5px 5px 0px 5px; 
    margin-right: 160px; 
    max-width: 79%; 
    text-align: right; 
} 

In beiden Fällen kein Floating, sondern ein Rand nach links/nach rechts.