How can I line up two divs horizontally within a container div?

Apologies if my terminology is off, I am relatively new to this. My goal is to align two divs horizontally, one containing an image and the other the message content. I have created a messaging user interface.

Everything was functioning correctly until I attempted to include the user's image alongside the message. I tried using display: inline-block; on both divs (image and message content) but that did not resolve the issue.

I am unsure of what other steps I can take, aside from resorting to Bootstrap's grid system, which may be excessive for this task.

Link to the code sample

htmlcss

Answer №2

If I were to envision a possible solution, it could involve representing each value within a table element. For example...

<table>
  <td>
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
  </td>
  <td>
    <div class="message-content message-to">
      Hey there, how has your day been so far?
    </div>
  </td>
</table>

Answer №3

Make sure to include the class d-flex wherever you find the class message-holder

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>

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

Set meanmenu to a fixed position

I am currently utilizing the meanmenu plugin to create a responsive menu for mobile devices. My goal is to fix the position of the menu at the bottom of the page so that users can easily access it. However, when I set the position of the meancontainer to ...

jqueryhtmlcsspositionfixed

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

The React Vite application encountered an issue: There is no loader configured for ".html" files at ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

**Encountered errors in a React Vite web app** ** ✘ [ERROR] No loader is configured for ".html" files: ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html ../server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86 ...

javascriptcssreactjsmaterial-uimediaquery

Deselect a radio button with a click event using jquery

When the page refreshes, radio buttons are left unchecked. <input type="radio" name="test"> 1<input type="radio" name="test">2 <input type="button" id="btn" /> $("#btn").click(function(){ $(':radio').each(function () { ...

jqueryhtmltwitter-bootstrapradio-buttonunchecked

I am having difficulty creating grid-template-columns in Vue

When I placed my code in the style scoped section... This is the desired output that I'm aiming for: .user-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem; } .user-car ...

cssvue.jsgridnuxt.js

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

javascripthtmlnode.js

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that was sl ...

javascriptjqueryhtmlcss

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

I am currently working on an angular 6 application where users are assigned different roles that require distinct styling. Role 1 uses Stylesheet 1, while Role 2 uses Stylesheet 2. The Navbar component is a crucial part of the overall layout structure of ...

cssangularstylingangular-router

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

javascriptcss

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line <span class="caret"></span> <ul> <li class="nav-item-1"> <a href="#">ITEM 1</a> <span class="caret"></span> ...

javascriptjqueryhtmlcss

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

css

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

How can I target all ul elements except those contained within a div with a specific class using CSS?

In my global.scss file, I have defined global styles for ul elements as shown below: ul { list-style: none; margin: 0; padding: 0; } However, I am trying to find a way to style all ul elements except those within a specific jodit-wrapper class ...

htmlcsssass

CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...

javascripthtmlcss

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

javascriptioscsscordovakeyboard

Customizing Row Background Color in Bootstrap

Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...

htmlcsstwitter-bootstrap