Css bulle (chat)

Bonjour,
J'ai un chat et je suis entrain de faire une version mobile/tablette.
J'ai repris le css à 0 et voilà où j'en suis:
(connecter en tant que Membre)

Design basique pour les petites écran x)
Mon problème est de vouloir enlever le surplus de bulle où il y a pas de texte.

J'ai essayer avec "float:left" pour les bulles qui vont à gauche et "float:right" pour les bulle de droite sa résout mon problème, mais un autre survient. Quand c'est des petit messages ils y en a plusieurs qui s'affiche sur la même ligne :/

css bulle jaune(gauche) et bleu(droite):

/***BULLE BLEU**/
                .bulle-bleu {
                    position:relative;
                    height: 100%;
                    padding-left:5px;
                    padding-right:5px;
                    padding-bottom: 5px;
                    padding-top: 5px;
                    margin: 7px 0 7px;
                    margin-right: 3px;
                    margin-left: 28px;
                    color:#000;
                    background:#0A87A9;
                    background:-webkit-gradient(linear, 0 0, 0 100%, from(#83D8FF), to(#0A87A9));
                    background:-moz-linear-gradient(#83D8FF, #0A87A9);
                    background:-o-linear-gradient(#83D8FF, #0A87A9);
                    background:linear-gradient(#83D8FF, #0A87A9);
                    -webkit-border-radius:5px;
                    -moz-border-radius:5px;
                    border-radius:5px;
                }
                .bulle-bleu .chat-time{
                    position: absolute;
                    color: grey;
                    font-size: 10px;
                    bottom: 5px;
                    left: -27px;
                }
/***BULLE JAUNE***/
                .bulle-jaune {
                    position:relative;
                    padding-left:5px;
                    padding-right:5px;
                    padding-bottom: 5px;
                    padding-top: 5px;
                    margin: 7px 0 7px;
                    margin-left: 3px;
                    margin-right: 28px;
                    color:#000;
                    background:#A6A60B;
                    background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFFC90), to(#A6A60B));
                    background:-moz-linear-gradient(#FFFC90, #A6A60B);
                    background:-o-linear-gradient(#FFFC90, #A6A60B);
                    background:linear-gradient(#FFFC90, #A6A60B);
                    -webkit-border-radius:5px;
                    -moz-border-radius:5px;
                    border-radius:5px;
                }
                .bulle-jaune .chat-time{
                    position: absolute;
                    color: grey;
                    font-size: 10px;
                    bottom: 5px;
                    right: -27px;
                }

Et voici le html/php:

if($_SESSION['Auth']['pseudo'] == $Ppseudo){$triangle="triangle-bleu";} else{$triangle="triangle-jaune";}?>
<div class="<?php echo $triangle; ?>">
<p>
<span class="chat-time" title="<?php echo date("d/m/y H:i:s",$d[$i]["date"]); ?>">
<?php echo date("H:i",$d[$i]["date"]); ?></span>
<span title="<?php echo $titre; ?>">
<font color="<?php echo $couleur ; ?>">
<strong><?php echo utf8_decode($pseudo); ?></strong>
</font></span>: 
<?php echo utf8_decode($message); ?></p></div>

Merci de votre aide !