нижние выравнивающие divs в нижней части окна

Question

Я пытаюсь выровнять кучу фиксированных ящиков чата в нижней части окна. Пробовал vertical-align: bottom но не работал.

<div id="container"> 
    <div class="message">Message 4</div> 
    <div class="message">Message 3</div> 
    <div class="message"> 
     Message 2 <br /> 
     <div>Message 2</div> 
     Message 2 
    </div> 
</div> 

#container{ 
    bottom: 0; 
    right: 0; 
    position: fixed; 
} 
.message { 
    border: 1px solid; 
    margin-top: 5px; 
    float: left; 
    margin-right: 5px;  
    background: #ccc 
} 

Fiddle

Спасибо!

Answer 1

Попробуйте это:

.message { 
    display: inline-block; 
    vertical-align: bottom; 
    /*float: left remove this*/ 
} 

Answer 2

Измените положение #container на абсолютное.

Кроме того, убедитесь, что ваш контейнер не находится внутри другого контейнера или элемента с указанным положением, или позиционирование будет относиться к этому контейнеру, а не к окну браузера.