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?

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

Very elegant solution. Never heard of the pointer-events attribute before. Thanks for the clear and quick response! — Adam Strudwick, Oct 25 '14 at 05:22
@AdamStrudwick - No worries, [pointer events is only supported IE11 +](http://caniuse.com/#feat=pointer-events). Is that an issue? — misterManSam, Oct 25 '14 at 05:23
Not at all, I don't support IE10 and under as they are only used by a minority of customers. — Adam Strudwick, Oct 25 '14 at 05:44

score 0 · Answer 2 · answered Oct 25 '14 at 05:02

I am not sure how you want to align them so I put them over each other.

http://jsfiddle.net/ouu94tfv/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; display:inline-block; float:right;}
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }

CSS align chat boxes to bottom of screen

2 Answers2

Example