Comple positioning, need pure CSS solution

Question

After two days of thinking and trying and experimenting with absolute positioning, inline/inline-block display, flex display and so on... I still did not find an answer to the question - "how to style a timestamp's label position, shown on the screenshot below, with pure CSS?".

Conditions:

a timestamp width can vary from min-width 60px to max-width 100% of the parent block (the parent has a max-width value and float right)
if a timestamp is smaller than 100% (eg 50%), the space to the left of it should be filled with a text, and the timestamp is always aligned to the right
if a text and a timestamp are smaller than parents max-width - they are shown on a single line (like 1st, and 2nd messages on the screenshot)
if a timestamp can't fit in a single line with a text - it drops down and aligned to the right
and if text can't fit in a single line (like 3rd message on the screenshot), a timestamp is shown on the second line, aligned to the right, and does not block the space above it

So far I could reach it only with JS, but I believe it is possible to make it work with pure CSS.

UPD: I've added a sandbox example for you guys, with rough code, if you will want to help me http://jsbin.com/gatifevowu/2/edit?html,css,output

score 2 · Accepted Answer · answered Jun 18 '16 at 22:03

I did not check for all conditions though, this should work:

CSS

.chat-message {
  clear: both;
  max-width: 450px;
  min-height: 38px;
  line-height: 18px;
  padding: 10px;
  box-shadow: 0 0.5px 1.5px 0 rgba(0,0,0,0.33);
  border-radius: 4px;
  float: right;
  background-color: $white-gray;
}
.chat-message__text {
  display: inline;
}
.chat-message__timestamp {
  float: right;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="chat-message">
    <div class="chat-message__text">Test message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
  <div class="chat-message">
    <div class="chat-message__text">Test message message message message message message message message message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
  <div class="chat-message">
    <div class="chat-message__text">Test message</div>
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</body>
</html>

Fiddle

Thanks, I took your code and with some changes it became a solution what I was looking for! — Mihail, Jun 21 '16 at 21:58

score 2 · Answer 2 · answered Jun 18 '16 at 22:05

Flexbox solution...only a minor HTML structure change required.

.chat-message {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: flex-end;
}
.chat-message__text {
  text-align: right;
}
.chat-message__timestamp {
  white-space: nowrap;
  padding-left: 1em;
  background: #c0ffee;
}

<div class="chat-message">
  <div class="chat-message__text">Test message 
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</div>
<div class="chat-message">
  <div class="chat-message__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam numquam ullam error, inventore molestias illo voluptatibus perspiciatis? Ducimus, numquam,  
    <span class="chat-message__timestamp">10:34 am</span>
  </div>
</div>
<div class="chat-message">
  <div class="chat-message__text">Lorem ipsum dolor sit.
    <span class="chat-message__timestamp">10:34 am</span>
  </div>

</div>

For some reason this code is not working in the same way in my project, probably I'm missing something. Though the solution is great. Thanks! — Mihail, Jun 21 '16 at 21:59
although that leads to all messages being right-aligned. Which is typically not what you would want, no? — Fabian Bosler, Oct 05 '20 at 11:23

Comple positioning, need pure CSS solution

2 Answers2