Tips for preventing uneven spacing on the right side of ragged-right text

I am facing an issue with my code snippet where there is an unwanted "padding" zone even though the padding is set to zero. How can I prevent this zone from appearing?

Code

div.left {
  background-color: red;
  max-width: 25%;
  float: left;
}

div.right {
  background-color: aqua;
  float: left;
}
<div class="left">
  longcontent longcontent longcontent 
</div>
<div class="right">
  something
</div>

Result

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

What I want

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

Edit

The above code example is a simplification, and I need a solution that works for more complex scenarios as well:

div.left {
  background-color: red;
  max-width: 40%;
  float: left;
}
div.right {
  background-color: aqua;
  float: left;
}
<div class="left">
  longcontent
  <img src="https://i.sstatic.net/snioV.png">
</div>
<div class="right">
  something
</div>

Answer №1

If you're truly determined, consider adding the style word-break: break-all; to the left side.

div.left {
  background-color: red;
  max-width: 25%;
  float: left;
  word-break: break-all;
}

div.right {
  background-color: aqua;
  float: left;
}
<div class="left">
  longcontent longcontent longcontent 
</div>
<div class="right">
  something
</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

How to use multiple class names with Next.js module CSS

Currently, in my project I am utilizing Next.js along with module.css. However, I have encountered an issue. There is a "button" component nested inside another component. I am trying to apply both a normal className and Style.myClass to this button compon ...

Show Content As Users Scroll Using Javascript, HTML, CSS, and jQuery

I am trying to create a webpage where the content is initially hidden and only appears when the user scrolls to a specific position on the page. A good example of what I'm looking for is the layout used on the Apple - iPhone 6 page. I have searched on ...

What are some effective methods for organizing HTML in a clean and orderly manner?

I have limited experience with HTML, but I need to layout a form in a precise manner similar to WinForms. Here is my attempt using the little CSS and HTML knowledge I possess: The issue lies in everything inside the white area being ABSOLUTELY LAID OUT .. ...

What could the possible reason behind the malfunctioning of my prepared statements for the insert operation?

I recently discovered that using prepared statements is a more effective method than using deprecated ones. Despite my best efforts and online tutorials, I haven't had any luck getting this to work or finding the problem. That's why I'm her ...

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...

What is the best way to transfer a table row from one table to another in AngularJS?

I need assistance with a feature that allows users to move rows between tables by clicking on buttons. When the 'up' button is clicked, the 2nd table row should be moved to the 1st table, and when the 'down' button is clicked, the 1st t ...

How can I create more space on a responsive webpage when minimizing the screen using CSS?

On this particular html page, <div class="mySlides" *ngIf="index == currentIndex"> <div *ngIf="hr"> <div class="slide-container slide-half" data-aos="fade-down" [innerHTML]=" ...

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

Retrieve all the documents within a specified folder and showcase the filenames in an HTML list using Java

package fileBrowser; import java.io.File; public class NestedFolderStructure { String str=""; public void organizeFolders( String path) { File root = new File( path ); File[] list = root.listFiles(); int numfiles=list.length; for (int i=0;i&l ...

The CSS styling for the rows in an Angular Material textarea is unresponsive

I have been working with angular Material design and have implemented a Textarea element. However, I am facing an issue where the height of the Textarea is fixed and cannot be changed. I have tried various solutions without success. How can I adjust the si ...

Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Hey everyone, I've encountered an issue with my code. It's working perfectly fine in Firefox, but in Chrome and Opera, the layout is all messed up. Can anyone help me pinpoint what might be going wrong here? <div class="row broadband-block"&g ...

Remove any posts that have a date earlier than the current day

Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...

What are the reasons behind the failure of this specific <audio> example on certain web browsers?

Can anyone explain why this particular example of audio code (from W3Schools) fails on Firefox 16 and IE9, but succeeds on Chrome V24? UPDATE: <!doctype html> <audio controls> <source src="horse.ogg" type="application/x-msdownload"> ...

Looking to set up a server that can manage SQL queries and serve HTML web pages efficiently

In my databasing course, I have the task of setting up a functional remote database. While I am confident in my ability to manage the database itself, I lack knowledge regarding web servers. My objectives include: - Creating a website where users can sel ...

Ways to make a child div extend beyond its parent's width, but only up to the width of the screen

Let's start by reviewing the JSFiddle example - check it out here. The issue lies in the styling and positioning of the div with the class class="overflow-parent". Although the class name seems descriptive, this div is actually intended to display th ...

Avoiding the page from scrolling to the top when the sidebar is opened (NextJS, Typescript, TailwindCSS)

I'm currently working on a website that features a sidebar for smaller screens. While the sidebar functions properly, I would like to keep the background page fixed in place when the sidebar is active so it does not scroll. In my code, I have utilize ...

Elevate Your Navbar's Hamburger Menu with Font Awesome SVG in React-Bootstrap!

Currently working with React-Bootstrap to create a Navbar. I have a desire to swap out the default hamburger menu icon provided by React-Bootstrap with a Font Awesome hamburger icon. Wondering what steps need to be taken in order to change the existing bu ...

Resize images within a button using table cell size in Bootstrap

I am looking to create a row of buttons within a table, where each button is represented by an image and has a transparent border/background. To achieve this, I placed each button in one of the 10 remaining cells of a table using <td class="col-sm ...

Issues with displaying images in CSS when using HTML 5 canvas drawing

In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

Using a custom HTML file as a container in an Android WebView

I am trying to include each loaded page within my own custom HTML file. My app needs to first parse the loaded page, select the body tag, insert it into my custom HTML file, display it in a WebView, and continue this process for each subsequent page. I h ...