title: CSS align chat boxes to bottom of screen
body: <p>I have several chat boxes and other div elements that need to be positioned at the bottom of the screen, aligned to the right.</p>
  
  <p>Problem #1: Elements do not have the same height, and the smaller ones are vertically aligned with the top of the highest element. Fiddle: <a href="http://jsfiddle.net/sd69jdxp/" rel="noreferrer">http://jsfiddle.net/sd69jdxp/</a></p>
  
  <pre><code>#container { position: fixed; bottom:0; left:0; right:0; }
  .chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }
  </code></pre>
  
  <p>Problem #2: Using the approach of </p>
  
  <blockquote>
    <p>display: inline-block; vertical-align: bottom;</p>
  </blockquote>
  
  <p>to align divs to the bottom of the page, the links (anchors) over the first (smallest) chat box are not clickable, as the parent container overlaps the links. And it's not possible to set a lower z-index to the chat container than to the content behind, since the chat boxes are children of the chat container and they MUST have a higher z-index than the page content. How can this issue be solved?
  Fiddle showing this issue: <a href="http://jsfiddle.net/xw689yv8/" rel="noreferrer">http://jsfiddle.net/xw689yv8/</a></p>
  
  <p><strong>Summary</strong>
  How can I force all divs to be aligned with the bottom right of the screen, without having the chat container (parent div of chat boxes) overlap the content in the page behind the chat boxes, thus making it unclickable?</p>