css - ウィンドウの下部に div を下揃え

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
}

フィドル

ありがとう！

Answer 1

これを試して：

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

Answer 2

#container の位置を絶対に変更します。

また、コンテナーが、指定された位置を持つ別のコンテナーまたは要素内にないことを確認してください。そうしないと、ブラウザー ウィンドウではなく、そのコンテナーを基準にして配置されます。