Two adjacent div elements containing text that seamlessly wraps and shares the same line

Here's a simple challenge for you - How can I make these two divs align on the same line:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0; float: right; display: inline; ">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

EDIT: Also, I need to figure out how to make the second (right) div expand to fill the remaining space without specifically setting its width. Additionally, I want the right div to display as a block and wrap text starting flush with the beginning of the first line ("Cum sociis...") when it hits the edge.

Grateful for your help!

css

Answer №1

Position them both on the left side by floating, you may want to experiment with placing the right float above the left one.

If this approach doesn't yield the desired result, consider setting a specific width for the second section.

If none of these methods work, please share your webpage with us so we can identify any other issues.

UPDATE -- here is an alternative method using absolute positioning

<div style="width: 200px; padding: 0; background-color: #f00; position:absolute;">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

Answer №2

Remove the float:right; as well as the second display:inline;:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</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

The event handler is not being triggered when selecting the tag

Currently working on a project where I am utilizing vanilla HTML/CSS/JS. My goal is to hide all items on a page initially, set a default option in a select tag, display only the element with the selected ID, and allow the user to choose different time peri ...

javascripthtmlcss

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

javascriptjqueryhtmlcss

Using javascript to color in cells of a grid of "pixels"

I have a project similar to an Etch-a-Sketch in progress. The main challenge I am currently facing is how to gradually darken each cell of the grid with every pass of the mouse cursor, based on the opacity of the cell being hovered over. When the grid cell ...

javascripthtmlcss

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Generate dynamic and user-defined positioning requires input parameters: offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth ...

javascripthtmlcssdom

Is it possible to manipulate div elements with JavaScript while utilizing node.js?

It seems like I'm missing something obvious here, as I'm working with node.js and I have correctly linked a javascript file (alert("hello"); works). However, I can't seem to make any changes to the DOM. Here's a simple example: jade: ...

javascriptcssnode.jspugstylus

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Currently in the process of creating a multi-touch kivy program using Python 3.52 on Linux. While Kivy is effective, I've encountered challenges with GUI development and experienced laggy animations. I've noticed that my program tends to slow do ...

pythonhtmlcssembeddedkivy

The gulp-sass import feature has been acting up quietly

I'm currently attempting to transpile a scss file using gulp-scss. However, when I execute the task, it seems that the imports are not being recognized. gulpfile.js gulp.src('./app/css/app.scss', {base: './'}) .pipe(sass({inc ...

cssimportsassgulp

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles

All buttons are uniform in size and not affected by the content

I'm struggling to make all buttons the same size when they contain different content. I'm looking for tips and tricks to better understand this issue. Here is a visual representation of the situation: https://i.sstatic.net/lsiAJ.png Below is the ...

htmlcss

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

htmlcsssass

CSS Trouble with Stacking Order

Seeking assistance with my learning/practice journey, any help is greatly appreciated. Please feel free to point out errors or inefficiencies. I currently have four layers in place: .body .main .main-side .sidebar Here is the design I'm trying to r ...

htmlcss

Tips on creating a keypress function for a div element with the contenteditable attribute

Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...

javascriptphpjqueryhtmlcss

Browser switch dependent on operating system

Recently, a guest raised concerns about a DIV element covering the content of the page. There is an issue with a popup that is supposed to only appear when the mouse hovers over its container: <td class="ref" id="myContainer"> <div><a ...

csswindowsinternet-explorer

Basic node.js server that responds with HTML and CSS

I have successfully created a basic http server to send an HTML file as a response. However, I'm struggling with how to also send a CSS file so that the client can view the HTML page styled with CSS in their browser. Here is my current code: var htt ...

javascripthtmlcssnode.js

navigating between html pages using sliding next and previous buttons

I am in the process of developing a multi-page form spread across 4 different pages. I would like to incorporate next and previous buttons to allow users to easily navigate through the form. Although I have tried looking online for solutions, most results ...

javascriptjqueryhtmlcss

Creating a row of aligned vertical sliders using jQuery UI

I'm having trouble aligning multiple vertical UI sliders on the same line. Here's what I'm looking to achieve: 1. Have 4 vertical sliders displayed in a row. 2. Show numerical values as the user moves each slider. The code I'm currentl ...

javascriptjqueryhtmlcssjquery-ui

I can't understand why my body width is so disproportionately larger than usual

https://i.stack.imgur.com/jbeyI.png Encountering a new issue now. The width of my body is unusually high and I can't seem to identify the cause. I have included the code below. Tried adjusting margins but no luck. Searched for solutions online wi ...

htmlcss

Instructions on relocating a rectangle and capturing its coordinates globally for cropping the chosen image

I am currently a software engineering trainee, focusing on learning Angular CLI. My current project involves image cropping on a canvas, where I draw a circle when clicked. My query pertains to moving the circle with a mousedown event and stopping it upon ...

csshtmlangulartypescripthtml5-canvas