A step-by-step guide on how to position divs to resemble a Skype chat interface

Hello all, I'm new to Stack Overflow and I hope I'm following all the guidelines correctly.

I am currently facing a challenge with positioning divs in a manner similar to a Skype chat window. While there are methods for aligning three divs (left, center, right) or two divs on the left side, aligning two divs on the right side together has proven to be quite tricky, especially when one of them doesn't have a fixed size.

So far, I've managed to position the incoming user's profile picture, chat bubble, and timestamp successfully, but I'm struggling with positioning the outgoing message.

Due to my numerous attempts at finding the right solution, the current code is messy. Any help that can set me on the right path would be greatly appreciated.

This image showcases the design I'm aiming for: Skype chat window

This is the HTML structure for incoming messages:

<div class="skype-parent">
    <img class="skype-in-avatar" src="users_avatar.jpg alt="" />
    <div class="skype-in-message">
        This is the incoming text.
    </div>
    <div class="skype-timestamp">
        08:42
    </div>
</div>

Here is the HTML structure for outgoing messages:

<div class="skype-parent">
    <div class="skype-out-message">
        This is the outgoing text.
    </div>
    <div class="skype-timestamp">
        08:56
    </div>
</div>

CSS for parent div (working as intended):

div.skype-parent {
    text-align:         left;
    margin-top:         0.2em;
    margin-bottom:      0.2em;
    clear:              both; 
}

CSS for timestamp div (working as intended):

div.skype-timestamp {
    text-align:         center;
    margin-top:         0.5em;
    float:              right; 
}

CSS for incoming messages (working as intended):

img.skype-in-avatar {
    float:              left;
    width:              30px; 
    height:             30px;
    margin-left:        0.5em;
    margin-right:       0.5em;
    border-radius:      1.5em;      
}

div.skype-in-message {
    max-width:          75%;
    background-color:   #c7edfc;
    padding:            0.5em;
    border-radius:      10px;
    display:            inline-block;
    vertical-align:     bottom; 
}

CSS for outgoing messages (not functioning correctly):

div.skype-out-message {
    max-width:          75%;
    background-color:   #e5f7fd;
    padding:            0.5em;
    border-radius:      10px; 
}

My main issue lies in positioning the outgoing message element. I need assistance in getting the chat bubble to align to the right while still being situated to the left of the timestamp, as shown in the example mentioned above.

htmlcss

Answer №1

https://i.sstatic.net/M8CEc.png

.skype-parent{
  font:         14px/1.23 sans-serif;
  display:      table;
  table-layout: fixed;
  width:        100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

/* ROWS */

.message{
  display: table-row;
}

/* ALL CELLS */

.message > *{
  position:   relative;
  box-sizing: border-box;
  display:    table-cell;
}
.message img{
  border-radius:  50%;
  vertical-align: middle;
}

/* IMAGE CELL & TIME CELL */

.message > div:nth-child(1),
.message > div:nth-child(3){
  width:      52px;
  text-align: center;
  font-size:  12px;
  color:      #AFCBD8;
}

/* MESSAGE CELLS */

.message p {
  color:      #6E767C;
  border-radius:4px;
  padding: 12px 14px;
  margin: 0 36px 0 0;
  background: #c7edfc;
}
.message.user p {
  margin: 0 0 0 36px;
  background: #e5f7fd;
}

/* ARROWS */

.message > div:nth-child(2):after {
  position:   absolute;
  content:    "";
  width:      8px;
  height:     8px;
  background: #c7edfc;
  left:       0;
  top:        18px;
  margin-left: -4px;
  transform:  rotate(45deg); -webkit-transform: rotate(45deg);
}

.message.user > div:nth-child(2):after {
  left:       100%;
  background: #e5f7fd;
}
<div class="skype-parent">

  <div class="message">
    <div><img src="https://i.sstatic.net/1ZIkv.jpg?s=32&g=1"></div>
    <div><p>It's easy!</p></div>
    <div>08:40</div>
  </div>

  <div class="message user">
    <div></div>
    <div><p>Really?</p></div>
    <div>08:42</div>
  </div>

  <div class="message">
    <div><img src="https://i.sstatic.net/1ZIkv.jpg?s=32&g=1"></div>
    <div><p>Well...</p></div>
    <div>08:42</div>
  </div>

</div>

To summarize: envision your chat window as a table grid:

https://i.sstatic.net/iqDSr.png

you observe ROWS and three cells per row.
Great, now, customize the <p> of the .message DIV (cells), include margin-left for the incoming message, and margin-right for the other one.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to open links specified in 'href' with Bootstrap 5 Navbar

After finishing developing my first page, I encountered an issue while working on the second page. I am using a bootstrap 5 navigation bar. The way I have set up the navbar is that once it reaches a breaking point, I disable the view to allow the full bar ...

htmlbootstrap-5

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...

javascripthtmlangulartypescript

Despite the fact that the toggle button in React is designed to function properly, it is currently not working as

Check out step #2 of this challenge where a toggle button is used to switch between displaying monthly and yearly values. Here's the accompanying code: import { NavLink } from "react-router-dom"; import { useContext } from "react"; ...

cssreactjsinputtogglebutton

basic php websocket demonstration

Seeking help for implementing websocket functionality. I have been working on a websocket example, but it seems to be encountering some issues that I can't identify. Any assistance would be greatly appreciated. Thank you in advance. Here are the ex ...

phphtmlwebsocket

An exploration of utilizing data- attributes in Haml and Rails

Could it possible that %a{href: '#', data_tabulate_explanation_height: 'toggle_me_ajax'} which results in underscores instead of dashes, like this: <a href="#" data_tabulate_explanation_height="toggle_me_ajax"> ...

htmlruby-on-railsruby-on-rails-3hamlcustom-data-attribute

The text enclosed by a span located inside a div and identified by xpath

I am struggling to extract text from a span nested within another text in a div (highlighted in the image). https://i.sstatic.net/8uIWz.png This snippet of code is relevant ... <div id="groupBlock3"> <div class="groupBlockTitle& ...

htmlxpath

The entire screen is filled with a background image, but there's an odd margin that seems

I created a div to use an image as a background that covers the entire screen. However, there seems to be a mysterious margin that I can't seem to remove. After examining the code, I couldn't find any indication that I had configured these margi ...

htmlcssangulartypescript

Ways to verify the efficiency of view engines such as Pug, EJS, and HTML

Currently, I am in the process of creating a Node.js Web Server. Initially, I decided to use pug as my view engine for this project. However, the Web Designer provided me with HTML files that have a very different syntax from pug. As a result, I am cons ...

htmlnode.jsperformancepugejs

selenium tutorial: accessing checkbox state for frost

There is a frost checkbox that I have defined as follows: <div id="protocol_input" class="ember-view frost-checkbox small"> <input id="protocol_input" class="input ember-view" type="checkbox"> <label class="label" tabindex="0" for="proto ...

htmlseleniumcheckboxselenium-webdriver

What is the best way to access the CSS resources within the designated Area section of an MVC project?

I am experiencing difficulties accessing a CSS file located within the MVC AREA section. Here is the direct path to the CSS file. After attempting to troubleshoot with firebug, I received the following error message: The stylesheet was not loaded ...

cssasp.net-mvc

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

javascripthtmlvue.jsvuejs2

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

How do I use JQuery to target all buttons with an id beginning with "aaa" and a class of "class_name"?

Looking to target buttons with id starting with "aaa" and a class named class_name1? Here's how: Select all elements with an id that begins with "aaa" Within this selection, choose buttons with the class of class_name1 Replace the current class (cl ...

javascriptjqueryhtml

Page load triggers background color shift

Here is the structure of my markup: <div class="authentication"> <div class="form-inputs"></div> </div> My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the ...

javascriptjqueryhtmlcss

Elements shifting positions based on the size of the window

I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For ...

htmlcss

The getelementbyid function is unable to locate the specified button identifier

As I dive into the world of Javascript, I wanted to create a simple input form with a corresponding response field on my website. However, I encountered an issue where using a basic submit button caused the page to refresh and erase the textfields before ...

javascripthtml

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

Create a PDF document using pdfmake within an iframe element

I am using this JS code and would like to generate a PDF within an iframe tag using pdfmake library. function start(){ var docDefinition = { content: [ { table: { multiple pages headerRows: 1, widths: [ '*&apos ...

javascripthtmlpdfiframe

Type the website address into the browser's address bar

Recently, I've been exploring the possibility of combining two ideas to navigate to a relative URL based on the current URL. While browsing this link, I came across the following code snippet: <script> function myFunction() { var x ...

javascripthtmlurl

Units of VH and VW with Bizarre IOS Mobile Browser Display

For my new project, I decided to use relative units which seemed like a good idea at the time. While working on it, I diligently checked on Chrome emulation to ensure everything looked good on various devices. After pushing it to Heroku, everything appear ...

htmlioscssipadviewport-units