Locating two elements in CSS side-by-side according to specifications

Question

I have a HTML/CSS deployment where I want to put messages and the acronyms of their corresponding owners. I was able to have what you can see in the next image:

However, unfortunately I am not able to locate the circles (with the acronyms of the message senders) next to the arrow of the corresponding text message (red arrows show where each circle should be located):

You can also see in the next image how the circles should be vertically aligned with respect to each text message:

The code is below, and also in this fiddle snippet if you want to try it directly.

body {
  margin: 0;
  background: white;
  width: 110mm;
  height: 170mm;
  height: 169.8mm;
}

div {
  display: block;
}

.container {
  position: relative;
}

.third {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: block;
  position: relative;
}

.third .date {
  text-align: right;
  color: #394759;
  font-size: 14px;
  font-family: 'Open_Sans_Regular';
  font-style: italic;
  padding-right: 3%;
  padding-top: 2%;
  padding-bottom: 2%;
  page-break-after: avoid !important;
  padding-right: 9%;
  padding-top: 5%;
  padding-bottom: 0;
}

.third .message_wrapper {
  page-break-inside: avoid !important;
  clear: both;
  padding: 0 20px;
}

.third .space {
  display: block;
  clear: both;
  width: 100%;
  height: 5mm;
}

.third .space_bot {
  display: block;
  clear: both;
  width: 100%;
  height: 3mm;
}

.third .message_wrapper .contact {
  font-family: 'Open_Sans_Regular';
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  line-height: 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  float: left;
  margin-left: 6%;
  color: #a7a9ac;
  border: 4px solid #a7a9ac;
  background: #ededed;
}

.third .message_wrapper.sender .contact {
  float: right;
  margin-left: 0;
  margin-right: 6%;
  color: white;
  border: 3px solid #394759;
  background: #394759;
}

.third .message_wrapper .images {
  padding: 2%;
}

.third .message_wrapper .content_wrapper {
  max-width: 50%;
  font-size: 15px;
  font-family: 'Open_Sans_Regular';
  border-radius: 10px;
  position: relative;
  padding-bottom: 6%;
  min-width: 3%;
  margin-left: 2%;
  float: left;
  padding: 2% 2% 2% 4%;
  color: white;
  border: 4px solid #a7a9ac;
  background-color: #a7a9ac;
}


/*Right bubbles - inner*/

.third .message_wrapper.sender .content_wrapper {
  margin-left: 0;
  margin-right: 2%;
  float: right;
  text-align: right;
  border-bottom-right-radius: 7px;
  color: #394759;
  border-color: #394759;
  background-color: #ebecee;
}

.third .message_wrapper.receiver .content_wrapper {
  border-bottom-left-radius: 7px;
  border-color: #a7a9ac;
  background-color: #ededed;
  color: #a7a9ac;
}

.third .message_wrapper .content_wrapper .content {
  word-wrap: break-word;
}

.third .message_wrapper .content_wrapper .corner {
  position: absolute;
  display: block;
  left: -22px;
  bottom: -7px;
  width: 32px;
}

.third .message_wrapper .content_wrapper .image {
  display: block;
  max-width: 100%;
}

.third .message_wrapper.sender .content_wrapper .corner {
  left: initial;
  right: -24px;
  bottom: -6px;
  height: 12px;
  width: 33px;
}

.third .message_wrapper.receiver .content_wrapper .corner {
  right: initial;
  left: -23px;
  bottom: -7px;
}

.msg_group {
  margin-top: 5%;
  padding-bottom: 5px;
}

<html>

<body>
  <div class="container third">
    <div class="msg_group">
      <div class="message_wrapper sender">
        <div class="date"><span class="date_light">10 déc. 2015 16H45</span></div>
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content"></div>
          <div class="images">
            <img class="image" src="https://preview.ibb.co/b7DZ4x/IMG_20151210_WA0002.jpg">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper sender">
        <div class="date"><span class="date_light">10 déc. 2015 16H46</span></div>
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">Lo entiendes?</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper receiver">
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">Si en la siguiente rotonda</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">En amarillo está la Avda. Juan Carlos I</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper receiver">
        <div class="date"><span class="date_light">10 déc. 2015 16H47</span></div>
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">a sdf adf as dfasdfasdfa df as df asd fa df asd f asd fasdfasdf asd fa sdf a sdf asdfasd f asdf a sdf</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">asdfadf asdfasdf fas dfas df asd fa sdf asd f asdf as df asd fa sdf asd f asd fasdfasdfasdf asd fa sdf as df asdf asdf asd fadfasdfasd f asdf a sdf asd fa sdfasdfa dsf as df asdfa sdf ad f asdfadfasdf a sdf asd fa sdf asdfadf a sdf asd f asd
            f asdfasdfa sdf as df asd f asdfasdf asd f asd f asdf</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">10 minutos andando</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper receiver">
        <div class="date"><span class="date_light">10 déc. 2015 16H48</span></div>
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">Yo te llamo cuando este valeee??</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
  </div>
</body>

</html>

Can you help me? Thank you.

CSS Grid shines on problems like this one. In general, less CSS makes the problem easier. Will fiddle in a moment. Link to [Box Alignment in CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) — stealththeninja, Apr 04 '18 at 04:09
stealththeninja: Out of curiosity, when do you prefer CSS grid over flexbox? — AnilRedshift, Apr 04 '18 at 04:30

VK Da NINJA · Accepted Answer · 2018-04-04T06:46:31.677

3

You can add relative position to .message_wrapper and then absolute position for .contact.

.third .message_wrapper {
   position: relative;
}

.third .message_wrapper .contact {
  position: absolute;  bottom: 0;
}

.third .message_wrapper.sender .contact {
  right: 0;
}

.third .message_wrapper.sender .content_wrapper {
  margin-right: 12%;
}

.third .message_wrapper.receiver .contact {
  left: 0;
}

.third .message_wrapper.receiver .content_wrapper {
  margin-left: 12%;
}

Here an update of your Fiddle

edited Apr 04 '18 at 06:46

answered Apr 04 '18 at 04:12

VK Da NINJA

510
7
19

1

@juanba1984 glad to help, but with this much CSS in your stylesheet it will get confuse and hard to maintain your code. You should consider using Sass or Less for better develop :) – VK Da NINJA Apr 04 '18 at 04:41

AnilRedshift · Answer 2 · 2018-04-05T05:36:18.193

You can solve this with flexbox!

TL;DR the below solution produces:

In order to get it at the bottom we'll use this approach: https://stackoverflow.com/a/27812717/3029173

For the 'right' aligned messages, you can use an outer flexbox to right align the divs, and then an inner flexbox to move the initial to the bottom:

<html>
<body>
<div class="chat-block">
  <div class="chat">
    <div class="picture"></div>
    <div class="initial-container">
      <div class="initial"></div>
     </div>
  </div>
</div>
</body>
</html>

and css:

.chat-block {
  background-color:teal;
  width:100%;
  height: 200px;
}

.chat {
  display: flex;
  justify-content: flex-end;
}

.picture {
  background-color: red;
  width: 40px;
  height: 80px;
  order: 1
}

.initial-container {
  display: flex;
  flex-direction: column;
  order: 2
}

.initial {
  background-color: yellow;
  width: 20px;
  height: 20px;
  margin-top: auto;
}

which gets you this:

To do a chat on the left, you just need to add the following css:

.chat {
  justify-content: flex-start;
}

.picture {
  order: 3
}

Changing those two CSS properties gives you this:

As you can see, it's a very scalable approach that doesn't take much CSS to implement.

document.getElementById('switch').addEventListener('click', () => {
  const block = document.getElementsByClassName('chat-block')[0];
  if (block.className === 'chat-block') {
    block.className = 'chat-block left';
  } else {
    block.className = 'chat-block';
  }
});

.chat-block {
  background-color:teal;
  width:100%;
  height: 200px;
}

.chat {
  display: flex;
  justify-content: flex-end;
}

.picture {
  background-color: red;
  width: 40px;
  height: 80px;
  order: 1
}

.initial-container {
  display: flex;
  flex-direction: column;
  order: 2
}

.initial {
  background-color: yellow;
  width: 20px;
  height: 20px;
  margin-top: auto;
}

.left .chat {
  justify-content: flex-start;
}

.left .picture {
  order: 3;
}


#switch {
margin-bottom: 20px;
}

<html>
<body>
<button id="switch">Toggle alignment</button>
<div class="chat-block">
  <div class="chat">
    <div class="picture"></div>
    <div class="initial-container">
      <div class="initial"></div>
     </div>
  </div>
</div>
</body>
</html>

Can you please use a fiddle? – juanba1984 Apr 04 '18 at 06:14 — juanba1984, Apr 04 '18 at 06:14
@juanba1984 I added a runnable code snippet to the bottom – AnilRedshift Apr 05 '18 at 05:36 — AnilRedshift, Apr 05 '18 at 05:36

Locating two elements in CSS side-by-side according to specifications

2 Answers2