Aligning a left-positioned div with a right-aligned div within a container

I'm trying to replicate this layout:

https://i.stack.imgur.com/mUXjU.png

Here is the HTML code I have so far:

<div class="container">
    <div class="floatingLeft">A right-aligned div</div>
    <div class="a">Lorem Ipsum</div>
    <div class="b">Ipsum Lorem</div>
    <div class="c">Other</div>
    <div class="d">Random</div>
    <div class="e">Text</div>
</div>

Is it possible to achieve this using only CSS? It would be great if the right-aligned div could also be vertically centered.

Thank you :)

Fiddle

htmlcssalignment

Answer №1

Per your request in the comment, I have included it as an answer.

Is this the type of solution you were looking for? Check it out here: jsfiddle.net/cob1wyz9/3

.container {
   display: table;
}
.floatingLeft {
   text-align: right;
   display: table-cell;
   vertical-align: middle;
}

Answer №2

Here is an example resembling the following...

* {box-sizing: border-box;}
.container {width: 40%;}
.container > div {width: 50%; float: right; clear:right;}
.container > div.floatLeft {float: left; text-align: right; padding-right: 3%;}
<div class="container">
    <div class="floatLeft">A right-aligned div</div>
    <div class="a">Lorem Ipsum</div>
    <div class="b">Ipsum Lorem</div>
    <div class="c">Other</div>
    <div class="d">Random</div>
    <div class="e">Text</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

An existing INPUT value can be modified by dynamically adding or subtracting values from SELECT OPTION

I currently have an <input readonly> field that displays the total_price value retrieved from a shopping cart stored in the database table. Moreover, I have included a <select> element with different transport options that can either increase o ...

javascriptphpjqueryhtml

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

Currently, I am using components from https://material.angularjs.org/latest/ for a searcher project. One specific component I am working with is the md-datepicker, and I would like to implement some custom styles on it such as changing the background colo ...

javascriptjquerycssangularjs

Button click functionality for updating in Classic ASP is functioning correctly exclusively in Internet Explorer and not in other web browsers

Currently, I am in the process of enhancing a Classic ASP application. Within this application, there is an HTML table that is populated from a SQL database. One cell within the table contains checkboxes. Upon clicking one of these checkboxes, a popup wind ...

javascripthtmldomasp-classicadodb

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read: "...as discussed in paragraph (a) of section ...

javascriptjqueryhtmlcss

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

javascriptjqueryhtmlcssjquery-select2

Tips for traversing through jquery ui accordion when a single panel has been disabled

I currently have a jQuery UI accordion set up with Next and Previous buttons in each panel to navigate through the sections. Additionally, I have a select HTML element in one of the panels where I can choose an option. If Option 1 is selected, the second a ...

javascriptjqueryhtmljquery-ui

Use CSS properties to isolate and extract the logo from the Sprite image

If we have a sprite image, like the StackOverflow sprite, and CSS properties like: background-position: 0px 0px; width: 250px; height: 61px; We can use the Chunky PNG library to crop out a specific part of the sprite. However, some websites use negative ...

cssrubybackground-imagechunkypng

The element cannot be clicked at this point as another element would intercept the click:

Having an issue with clicking a button at the top of the page. The CSS selector works fine in my local Eclipse environment, but when trying to run it on Jenkins server on my local machine, it fails with an error stating that the element is not clickable. T ...

javacssseleniumjenkinscucumber

"Revolutionizing the way we navigate: Angular's innovative

Presently, my focus is on incorporating route transitions into my project. I've employed a component that appears on click and triggers the corresponding service function: routeTransition(destination) { if (this.router.url !== destination) { t ...

htmlcssangulartypescriptangular-animations

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

jqueryhtmlcssjquery-animatebootstrap-4

How to dynamically adjust the size of an HTML page using jQuery without displaying

Currently, I am working on resizing an HTML page vertically using jQuery. While I have successfully managed to resize the page, I encounter a problem where depending on the image used, I sometimes see vertical or horizontal bars even though the image fits ...

jqueryhtmlwindow-resize

Creating a new form upon clicking

By clicking the "Add New Job" link, a new form with three fields will appear. This is the primary form: <h2>JOB EXPERIENCE 1</h2> <div class="job-content"> <input type="text" value="Company" name="company" /> <input type="te ...

phpjqueryhtmlajax

Is there a way to retrieve the fields of an index in elastic search?

After receiving a JSON object from an elastic search query, I successfully extracted the data using the code snippet below: $scope.results = response.hits.hits; console.log($scope.results); var resultstofilter = []; var resultArray = []; ...

javascripthtmljsonangularjs

Steps to configure JavaScript to initially conceal a div within a continuous loop

I have implemented a JavaScript function to toggle the show/hide functionality of a div class. The content of the div and the button that triggers the toggle action are both inside a while loop. Initially, I used "div id" in my JavaScript code, but it was ...

javascriptphpjqueryhtml

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid

Having trouble with your custom AngularJS directive not functioning correctly?

I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...

javascripthtmlangularjsangularjs-directive

Error with Bootstrap Layout caused by the StringBuilder

After diving into Bootstrap, I encountered an issue with the layout generated by a VB.NET page using StringBuilder. The result was a disorganized mess: Upon further inspection, it became evident that the problem extended to other sections of the page as w ...

htmlcssvb.nettwitter-bootstrap

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

I have a lengthy phrase that takes up too much space on mobile devices. Here is an example: .artificial-phone-viewport { width: 320px; height: 500px; border: 1px solid darkgrey; } .container { width: 100%; height: 100%; } .text { /* * Do ...

cssoverflow

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

javascriptjquerycssfrontend