'Text overlapping issue

So I am creating a a web chat and I am trying to set up my message timestamp to be a little more up.. meaning that the margins are overlapping. I am not sure how to set my text div to be wide enough so the timestamp doesn't overlap with actual message text.

.message-box {
  background-color: #7facd3;
  align-self: flex-start;
  border-radius: 0.5rem;
  color: black;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 85%;
  margin: 3px 10px 0 10px;
  padding: 5px;
}

.message-text {
  margin-top: 4px;
  text-align: left;
  width: fit-content;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.timestamp-div {
  display: block;
  align-self: flex-end;
  margin: -11px 0 0 0;
  width: min-content;
  line-height: 15px;
  padding: 0;
  font-size: 11px;
  font-weight: 300;
}
<div class='message-box'>
  <span class='username'>Aleks</span>
  <div class='message-text'>Message.</div>
  <div class='timestamp-div'>14:56</div>
</div>

Current situation:

Current situation.

htmlcss


Solution 1:[1]

Just remove the margin from your .timestamp-div and the time will be shown below the text (You can also just remove the -11px)

Here's your code:

.message-box {
  background-color: #7facd3;
  align-self: flex-start;
  border-radius: 0.5rem;
  color: black;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 85%;
  margin: 3px 10px 0 10px;
  padding: 5px;
}

.message-text {
  margin-top: 4px;
  text-align: left;
  width: fit-content;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.timestamp-div {
  display: block;
  align-self: flex-end;
  width: min-content;
  line-height: 15px;
  padding: 0;
  font-size: 11px;
  font-weight: 300;
}
<div class='message-box'>
  <span class='username'>Aleks</span>
  <div class='message-text'>Message.</div>
  <div class='timestamp-div'>14:56</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GucciBananaKing99

Related Questions