CSS Ширина шара речи

Question

Я считаю, что это довольно простой вопрос для тех, кто знает язык CSS (а не мой случай lol). Я использую this code, размещенный в jsfiddle, чтобы сделать некоторые речевые воздушные шары на моем сайте. Проблема возникла, когда сообщение внутри воздушного шара мало. Например, в коде, публикуемой выше, измените код с «пузырем вы» воздушным шаром что-то вроде:

<div class="bubble you">Hi.</div> 

Вы увидите, что шар остается на одной горизонтальной линии, как и предыдущий воздушный шар, и это некрасиво и странно. Я хочу, чтобы воздушные шары оставались один за другим (один ниже другого), даже когда сообщение мало, как простой «Привет» ... Какие свойства я должен изменить или добавить в классы шаров, чтобы это получить?

Answer 1

Добавить clear: both в .bubble.

Демо здесь:

http://jsfiddle.net/sifriday/mek5Z/1957/

.bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0 0 6px #B2B2B2; 
    display: inline-block; 
    padding: 10px 18px; 
    position: relative; 
    vertical-align: top; 
    clear: both 
}