CSS align chat boxes to bottom of screen

Question

I have several chat boxes and other div elements that need to be positioned at the bottom of the screen, aligned to the right.

Problem #1: Elements do not have the same height, and the smaller ones are vertically aligned with the top of the highest element. Fiddle: http://jsfiddle.net/sd69jdxp/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }

Problem #2: Using the approach of

display: inline-block; vertical-align: bottom;

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: http://jsfiddle.net/xw689yv8/

Summary 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?

Answer 1

• Use pointer-events: none on the container; elements underneath it will now be clickable.

• Arrange the chat boxes inside the fixed container with display: inline-block and vertical-align: bottom.

• The chat boxes get pointer-events: auto so they and their children can be clicked.

For IE10 and below, check out this answer to an older question to transfer click events.

Example

See it full screen and select the text input sitting underneath the invisible container.

.under {
  position: absolute;
  bottom: 200px;
  right: 200px;
}
#container {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.chat {
  border: 1px solid #999;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin: 0 5px;
  pointer-events: auto;
}
.title {
  padding: 0.5em;
  background-color: blue;
  color: white;
}
.text {
  padding: 10px;
}

<div class="under">
  <input type="text" value="select me!" />
</div>

<div id="container">
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text" style="height:250px">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
</div>