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

What is the best way to set a div's size to a constant value?

I recently designed a webpage that includes a feature where clicking a button adjusts the font size within the div. Within the div, there is a ul containing the buttons. However, when the font size changes, the div expands and the nav buttons also shift a ...

csshtmlfixed

What could be causing this unexpected delay?

I have been working on improving the load time of my website as it was quite lengthy, but even after optimizations, I am facing issues specifically with the jQuery UI CSS images. If you could spare a moment, would you mind taking a look at this Pingdom te ...

csspathdelayload-timepingdom

JQuery script fails to load in the head section while dynamically generating an HTML page with JavaScript

Using JavaScript, I have created a new window dynamically and added some HTML code to it. However, when I try to insert a script link into the HTML head, it fails to load when the window is open. <script type="text/javascript"> function newWindo ...

javascriptjqueryhtml

Using JavaScript to set a form via a parameter in the URL

Is there a way to dynamically change the SetForm based on a parameter in the URL, such as radio.php?land=form2? I tried doing it this way but it doesn't seem to work. However, when I do it manually via the menu, it works. This is my first time attemp ...

javascripthtml

Center-align the items in an owl carousel

My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. H ...

jqueryhtmlcssowl-carousel

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Place various <select> choices in numerous rows

Currently, I have an HTML form that contains a select field with multiple options that allow selecting multiple values. Previously, I was using the implode function to insert these selected values into a MySQL table separated by commas. However, I now need ...

phphtmlmysqli

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

htmlcss

Reveal or conceal interactive material using data attributes

I am having difficulty in achieving a certain functionality on my website. Here is the HTML code I am using: <div id="menu"></div> <ul class="countries"> <li data-country="country-1" data-countryname="France">Category France</ ...

jqueryhtml

Can you explain the significance of the jz element in HTML?

When visiting this particular page, it was noticed that the well-known ad blocking software successfully removed ads positioned near the top and right of the page. However, unexpectedly, this software added a brand new section of clickbait ads located just ...

htmlelement

Discover the power of uploading images using HTML5 with PHP

Is there a way to retrieve values of uploaded images after clicking on the submit button using $_POST in PHP (with image upload through HTML5)? For an example of HTML5 image upload, you can check out this link You can access the demo at the following lin ...

phpjavascriptjqueryhtml

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Preventing Past Dates from Being Selected in JQuery Date Picker

Need help with a date picker that only allows selection of the 1st and 15th dates of each month. How can I prevent users from selecting previous dates? <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" ty ...

javascriptjqueryhtmljquery-ui-datepicker

Document the user's input by recording it in a text file

After experimenting with a simple HTML code like this: <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> ...

htmlinputtextuser-input

What is the best way to output a received HTML page from the server?

I'm currently working on printing an HTML page that was generated using Node.js on my server. After sending the page to the client side as a response to an AJAX request, I have stored it in a JavaScript variable. var resp_json = printRequest.getRespo ...

javascripthtmlajaxnode.js

An HTML form containing various input fields organized as a JSON string

I need to pass two parameters, param1 and param2, to a servlet. Param1 should be in JSON format, while param2 is a regular input value. param1 = {"id":"userid","name":"username","status":"userstatus"} param2 = add How can I accomplish this using the HTM ...

htmljsonservlets

What steps do I need to take to launch an embedded kml tour?

This marks the beginning of my journey into the world of online forums! I used to rely on Stack Exchange for answers to my questions, but most of the time, someone else had already asked what I needed to know. It goes to show how effective this website is. ...

htmlrgoogle-mapskmlgoogle-earth

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

htmlangular

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Could my HTML security measures be vulnerable to exploitation?

I have successfully developed a function that accomplishes the following: It accepts a string as input, which can be either an entire HTML document or an HTML "snippet" (even if it's broken). It creates a DOMDocument from the input and iterates throu ...

phphtmlsecurityhtml-parsingdomdocument