What are alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Looking to create a div element that only expands from the left side as content is added?

<div 
    id="sent_message"
    style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: inline-block; max-width: 50%; min-width: 20%; font-size: 25px; border-radius: 5px; word-wrap: break-word; position: relative; right: -1360;'>
    <p>Hello</p>
</div>

Prefer not to use position:absolute? Is there a way to prevent the expansion of the div from the right side? Your help would be greatly appreciated.

javascripthtmlcss

Answer №1

To align the content to the right, you can use the CSS property float:right

window.setTimeout(function(){
    document.querySelector('#sent_message p').innerHTML = 'Hello World, welcome!';
}, 1000);
#sent_message {
  background-color: #2b89cc;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 10px;
  display: inline-block;
  max-width: 50%;
  min-width: 20%;
  font-size: 25px;
  border-radius: 5px;
  word-wrap: break-word;
  position: relative;
  float: right;
}
<div id="sent_message">
  <p>Hello</p>
</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

Filtering a 2-dimensional array based on a specific string match

I have an array with various objects and I am trying to find all objects that have the string "en-GB". However, I am encountering an issue with my current approach that gives me the error message "Cannot use 'in' operator to search for 'en&a ...

javascriptarraysfilter

Establishing a connection between HTML and MySQL database

I've been researching how to create a login system on my HTML page. From what I've learned, it seems I need to use an intermediate script to allow my HTML access to the database. So, I've created a PHP page that verifies the username and pas ...

phphtmlajax

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...

javascripthtmlcssreactjs

The event.preventDefault() method does not work on Android tablets when using touchstart

I have implemented a responsive drop-down menu that involves canceling the click event for tablet users in order to display the sub-menu using event.preventDefault(). This function works perfectly on iPad devices but seems to be ineffective on Android. E ...

javascriptandroidjquery

Navigating within a nested view using Angular's UI-Router

I've encountered a puzzling issue that I've been grappling with for the past three days. It seems like a straightforward problem, but for some reason, it's causing me a lot of trouble. The main parent view in my code contains two child view ...

angularjshtmlionic-framework

Achieving vertical center alignment in React Native: Tips and techniques

Just a quick heads-up: This question pertains to a school project. I'm currently knee-deep in a full-stack project that utilizes React Native for the front-end. I've hit a bit of a snag when it comes to page layout. Here's the snippet of my ...

javascriptreactjsreact-nativeweb-frontendreact-native-web

Guide to importing JavaScript in an npm package using TypeScript and JavaScript

I recently downloaded a library that includes both Typescript and its corresponding javascript version. Despite trying to declare import Library from "@scope/library", my application is only able to access the Typescript version, even after adding the .js ...

javascriptreactjstypescriptnpmwebpack

What is the best way to display a single font in various sizes?

Have you ever noticed the unique typography on typedetail.com? The font sizes of the logo (TYPE DETAIL) and the title (ABOUT TYPE DETAIL) are different, with the first letters appearing larger than the rest. Surprisingly, upon inspecting the style sheets, ...

css

Facing CORS issue when trying to use the app on a device without network activity, although it works fine on

Currently, I am in the process of developing an Ionic app. Interestingly, the app runs smoothly in the browser; however, when it comes to running it on the device, the HTTP requests fail to load. Upon inspecting the app using Safari remote debugging, no er ...

javascriptangularjsajaxcordovaionic-framework

Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or ...

htmlcsstwitter-bootstrapbootstrap-5

"Implemented a user-friendly header and footer that stick to the top and

My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place. To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed her ...

jquerycss

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

jqueryhtmlcssasp.nettwitter-bootstrap

Why does the getter consistently generate the previous value?

Check out this code snippet: function User(fullName) { this.fullName = fullName; Object.defineProperties(this, { firstName: { get: function () { return fullName.split(" ")[0]; ...

javascriptgetset

Utilizing Python, Javascript, and AJAX to enhance the live search functionality

I am currently working on developing an AJAX live search feature using Python. Being new to AJAX, I have been learning from various tutorials and documentation to make progress. While searching, I came across an example at http://www.w3schools.com/ajax/aja ...

javascriptpythonajax

Assign the private members of the class to the arguments of the constructor

class Bar { #one #two #three #four #five #six #seven #eight #nine #ten #eleven #twelve #thirteen #fourteen #fifteen #sixteen constructor( one, two, three, four, five, six, seven, eight, ...

javascripttypescriptes6-class

Webpack attempting to load build.js from a nested folder

I am in the process of setting up a Vue app with Vuetify and Vue Router. Everything works fine when I load the base URL "/", and I can easily navigate to /manage/products. However, if I try to directly access /manage/products by typing it into the address ...

javascriptwebpackvue.jsvue-routervuetify.js

unable to retrieve the response from a POST request sent to a node server

Currently in the process of learning how to utilize node and express, I have embarked on creating a sample website that incorporates both along with the Google translate API. The goal is to explore the numerous features offered by these technologies. Unfor ...

javascriptnode.jsajaxhttpexpress

Using jQuery to create a blinking effect on a specific letter in a string

I'm looking to create a text adventure using Canvas, and I want the parser to blink continuously, similar to the one in a Dos Console. The parser is stored as a global variable. How can I use jQuery to permanently change the character of this global v ...

javascriptjquerycanvas

Angular: Preserve the URL even when encountering a 404 page

Creating a custom 404 page in Angular 4 is something I have recently done, and I am looking for a way to preserve the incorrect URL that was input by the user. To see an example of this behavior, you can visit sites like GitHub. They show a 404 page when a ...

javascriptangular

Unraveling the Mystery of CSS3 or JavaScript Sliders

I am currently developing a new website and I was intrigued by the slider effect on Apple and IBM's websites. For reference, you can check out how it works on sites like: and I noticed that the text and images slide in opposite directions, which se ...

javascripthtmlcssslider