CODEWITHSUNDEEP
htmlcss
Jackie
Jackie

Reputation: 372

Div is not being placed next to each other

Essentially I have some text message bubbles. I want to put in the date and time next to the bubbles (respectively) but they don't seem to be placed in the right place. As you can see the blue text bubble has the date displayed on the right hand side of the bubble and the grey bubble has text displayed on the left hand side of the bubble.

How I want it to look

How I want it to look

How it actually looks

How it actually looks

Could someone please help me with this. I am very confused

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.chat {
  width: 320px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
}

p {
  margin: 0.5em 0em;
}

.them-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
  float: left;
}

.them-bubble::after  {
  content: "";
  position: absolute;
  left: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

.me-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  max-width: 75%;
  clear: both;
  position: relative;
  float: right;
  float: right;
  background-color: #1289fe;
  color: white;
}

.me-bubble::after  {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

.me-date {
    color: #98979c;
    font-size: 12px;
    font-weight: 700;
    width: 65px;
    float: right;
}

.them-date {
    color: #98979c;
    font-size: 12px;
    font-weight: 700;
    width: 65px;
    float: left;
}
<div class="chat">

    <div class="message">
        <div class="me-date">22/11/19 11:42 PM</div>
        <div class="me-bubble">
            <p>Hello how are you</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:43 PM</div>
        <div class="them-bubble">
            <p>I am good, how are you?</p>
        </div>
    </div>

    <div class="message">
        <div class="me-date">22/11/19 11:44 PM</div>
        <div class="me-bubble">
            <p>I am fantastic. This is a long message so the bubble goes down into another couple lines. Typing more text here</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:43 PM</div>
        <div class="them-bubble">
            <p>This is a really long reply so the messahe makes multiple bubbles. More typing here</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:46 PM</div>
        <div class="them-bubble">
            <p>Double sending them message</p>
        </div>
    </div>

    <div class="message">
        <div class="them-date">22/11/19 11:46 PM</div>
        <div class="them-bubble">
            <p>Triple sending them message and this is a double long bubble</p>
        </div>
    </div>

</div>

Upvotes: 1

Views: 47

Answers (1)

symlink
symlink

Reputation: 12218

With flexbox and five style rules, you can create this effect:

/* New Code */

.message {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.message .me-date {
  order: 2;
}

.message .me-bubble {
  margin-left: auto;
}

.message .me-date {
  text-align: right;
}

.message .me-bubble,
.message .them-bubble {
  max-width: 200px;
}

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.chat {
  width: 320px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
}

p {
  margin: 0.5em 0em;
}

.them-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
  float: left;
}

.them-bubble::after {
  content: "";
  position: absolute;
  left: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

.me-bubble {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0px 16px;
  max-width: 75%;
  clear: both;
  position: relative;
  float: right;
  float: right;
  background-color: #1289fe;
  color: white;
}

.me-bubble::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

.me-date {
  color: #98979c;
  font-size: 12px;
  font-weight: 700;
  width: 65px;
}

.them-date {
  color: #98979c;
  font-size: 12px;
  font-weight: 700;
  width: 65px;
}

.chat {
  min-width: 400px;
  width: 100%;
}
<div class="chat">

  <div class="message">
    <div class="me-date">22/11/19 11:42 PM</div>
    <div class="me-bubble">
      <p>Hello how are you</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:43 PM</div>
    <div class="them-bubble">
      <p>I am good, how are you?</p>
    </div>
  </div>

  <div class="message">
    <div class="me-date">22/11/19 11:44 PM</div>
    <div class="me-bubble">
      <p>I am fantastic. This is a long message so the bubble goes down into another couple lines. Typing more text here</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:43 PM</div>
    <div class="them-bubble">
      <p>This is a really long reply so the messahe makes multiple bubbles. More typing here</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:46 PM</div>
    <div class="them-bubble">
      <p>Double sending them message</p>
    </div>
  </div>

  <div class="message">
    <div class="them-date">22/11/19 11:46 PM</div>
    <div class="them-bubble">
      <p>Triple sending them message and this is a double long bubble</p>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions