Horizontally align two divs inside a parent holder div?

Question

I'm sorry if I'm not using the correct terminology, I'm new to this. I want to stack two divs side by side horizontally, the image and the message content. I have coded a messaging UI.

It all worked fine until I wanted to ad the users image next to the message. I have tried adding display: inline-block; to both divs (the image and message content) but that didn't help.

I'm not sure what else I can do, unless I just use bootstraps grid system, which seems overkill.

https://codepen.io/anon/pen/pxZygr

Possible duplicate of [Floating div right without allowing the div after to move up?](https://stackoverflow.com/questions/52919580/floating-div-right-without-allowing-the-div-after-to-move-up) — SuperDJ, Oct 21 '18 at 22:18
Not sure how it's a duplicate. It's about the same code, but a totally different question. — Adam G, Oct 21 '18 at 22:20

score 0 · Answer 1 · answered Oct 21 '18 at 22:21

0

clear:both; prevents elements from floating next to one another. Your style rule .message-holder .message-to { clear: both; } is affecting the elements you want to display inline. Here's a helpful readup I found on floats and clear: both.

answered Oct 21 '18 at 22:21

Frish

1,371
10
20

score 0 · Answer 2 · answered Oct 21 '18 at 22:23

One way I can think of this working would be to have each value implemented as a table element. Something like...

<table>
  <td>
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
  </td>
  <td>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </td>
</table>

score 0 · Answer 3 · answered Oct 21 '18 at 23:01

Wherever you have class message-holder, add class d-flex

html,
body {
  height: 100%;
}

.messages-wrapper {
  padding: 20px 20px 0px 20px;
  height: 100vh;
}

.pull-right {
  float: right !important;
}

.message-holder .message-to {
  float: right;
  clear: both;
}

.message-content {
  max-width: 300px;
  padding: 12px 15px 12px 15px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.message-image {
  clear: both;
}

.message-image img {
  width: 40px;
  border-radius: 100%;
}

.message-picture img {
  width: 20px;
  height: 20px;
}

.message-to {
  background-color: #161616;
  color: #fff;
  float: right;
}

.message-from {
  background-color: #ebebeb;
  float: left;
}

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<div class="messages-wrapper">
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Can you also bring your charger when you come round?
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-from">
      It was alright, I'll tell you all about it later! No problem, I'm on my way now.
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-from">
      ffff
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </div>
</div>

Horizontally align two divs inside a parent holder div?

3 Answers3