Align <li> elements at the bottom of <ul>

Question

I created realtime chat boxes

There is a "chat" <ul> element bar at the bottom of the page, on which I put many chatBoxes <li> . These chatboxes can be minimized. Nothing really fancy, it's what many people do, including facebook.

The matter is that when one chatbox is minimized and another is not, then the minimized chat does not stick to the bottom of the page: it on the middle of the page, aligned to the top of the other non-minimized chat.

Here is a JsFiddle that shows the problem: http://jsfiddle.net/k8UTJ/1/

Please can someone edit this JsFiddle to show me that we can align the "User2" chat bar (minimized) to the bottom of the page?

Thanks

Answer 1

Problem was float:right in your .chatBox . Demo