Aligning a div to the right using inline-block: A simple guide

Is there a way to align the first div to the right without using float? I don't want the second div to be on the same line. My goal is to maintain the block level layout similar to chat applications. Any assistance would be highly appreciated. THANKS

Note: I am utilizing display inline-block to ensure that the divs fit the content properly.

.outer{
  display: block; 
}

.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}

.lbubble{
    background: lightblue;
}

.rbubble{
    background: lightgreen;
}

.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}

.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}
<div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
<div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>

htmlcss

Answer №1

To align the bubbles correctly, you can utilize the CSS properties float: right and clear: right. Here's an example code snippet:

.outer {
  display: block;
  clear: right;/*clear float right*/
}
.lbubble,
.rbubble {
  position: relative;
  padding: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 10px 0px #616161;
  box-shadow: 2px 2px 7px 0px #616161;
  display: inline-block;
  margin-bottom: 8px;
}
.lbubble {
  background: lightblue;
}
.rbubble {
  background: lightgreen;
  float: right;/*add float right*/
}
.lbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  left: -8px;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent lightblue;
  width: 0;
  z-index: 1;
}
.rbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent lightgreen;
  width: 0;
  z-index: 1;
}
<div class='outer'>
  <div class="rbubble">Right Bubble with align right</div>
</div>
<div class='outer'>
  <div class="lbubble">Left Bubble it should be on 2nd line with align left</div>
</div>

By utilizing clear: right, you can ensure that the left bubble element is positioned correctly.

Answer №2

To create two containers for the bubbles, you can use the CSS properties float: left and float: right.

.outer{
  display: block; 
}

.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}
.container {
    width: 100%;
    height: 30px;
}
.lbubble{
    background: lightblue;
    float: left;
}

.rbubble{
    background: lightgreen;
    float: right;
}

.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}

.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}
<div class="container">
  <div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
</div>
<div class="container">
  <div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>
</div>

Answer №3

The main focus of this section lies in the CSS snippet below:

.rbubble{
    background: lightgreen;
    margin-left: 100%;
    transform: translateX(-100%);
    word-wrap: avoid-break;
}

We are moving the element completely out of its container to the right and then bringing it back to the left using transform: translateX(-100%);. This approach eliminates the need for messy float properties and extra wrappers.

.outer{
  display: block; 
}

.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}

.lbubble{
    background: lightblue;
}

.rbubble{
    background: lightgreen;
    margin-left: 100%;
    transform: translateX(-100%);
    word-wrap: avoid-break;
}

.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}

.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}
<div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
<div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </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

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

The width of Material UI Grid decreases every time it is re-rendered

I'm attempting to display a list of 25 words in a 5x5 grid using the MUI Grid component. The grid is structured as a <Grid container direction="column"> with five <Grid item> elements. Each <Grid item> contains: <Grid co ...

javascriptcssreactjsmaterial-ui

Is it possible to align Bootstrap buttons and input fields in a single row, and have the input field stretch to

I'm struggling to align Bootstrap buttons and input on the same line, with the input stretching horizontally while snugly fitting against the buttons. Here are my different attempts: https://i.sstatic.net/wuUsr.png In attempt #1: the button group an ...

htmlcsstwitter-bootstrap

Class without a single TD in TR

<table> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td> ...

htmlcss

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...

javascriptjqueryhtmlcss

Save a FlexTable as an HTML file using R script

Is there a way to export a FlexTable created using the ReporteRs package as an .html file in RStudio without losing the formatting? Currently, I can manually save the table as a webpage by clicking on 'Export' and choosing 'Save as webpage& ...

htmlrexportflextablereporters

The elusive three.module.js file has gone missing, leaving behind a trail of 404 errors

It seems like a simple mistake, but I'm encountering a 404 error for a file that actually exists: http://localhost:8000/Desktop/Skeletor/js/build/three.module.js net::ERR_ABORTED 404 (File not found) The correct path should be http://localhost: ...

javascripthtmlthree.js

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

Trouble embedding iframes in local files?

I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...

javascripthtmliframe

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

I have created custom weather icons like a sun, cloud, and rainy cloud using Photoshop. My goal is to allow users to click on these icons and change the background image of the website's body. However, despite my efforts, clicking on the images does n ...

javascriptjqueryhtmlcss

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

javascriptjqueryhtmlajax

Avoiding unnecessary white space when positioning HTML elements

I am working with two images, imgA and imgB. ImgA is 2000px high while imgB is 1000px high. After placing them one after the other, I use relative positioning to move imgB up in order to overlap imgA. Expectedly, the browser window should be 2000px high, ...

htmlcss

What could be causing the incorrect updating of React State when passing my function to useState?

Currently, I am in the process of implementing a feature to toggle checkboxes and have encountered two inquiries. I have a checkbox component as well as a parent component responsible for managing the checkboxes' behavior. The issue arises when utiliz ...

javascripthtmlreactjsonchange

Difficulties encountered when preserving the data of a website in HTML format

Usually, I request tweets on Twitter for a specific period and then scroll down the page to the last tweet. I save the HTML code of this page by right-clicking and selecting "Save As..." However, only the latest tweets are displayed in this HTML file. Is ...

htmltwitter

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

htmlangulartypescriptvalidation

Tips on clearing notices and warnings at the bottom of a PHP questionnaire

Below is the code I am working with: <?php include_once 'init/init.funcs.php'; $_SESSION['pollid'] = (int) $_GET['pollid']; $questions = array(); if (!isset($_SESSION['answering'])) { $result = mysql_query ...

phphtmlmysqlundefined

Issue with $_FILES and $_POST data being empty during file uploads

There's a strange phenomenon I've observed when uploading videos - sometimes the $_POST and $_FILES array is completely empty. It's happened with a few of the videos I've tested, all of which are in the video/mp4 file format. <!DOCT ...

phphtmlmultipartform-data

Customize Your Chrome Experience: Inject an Element to Open a Hidden HTML Page within the Extension

I am currently working on a Chrome extension and I would like to add a link tag into an object, which will then direct the user to an about page stored within the extension itself. Is there a way to achieve this? Below is the code from my content.js file: ...

javascripthtmlgoogle-chrome

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

htmlcssangularjs