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

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

javascriptjqueryhtmljsonreactjs

"Retrieve data from an Excel file and either present it in a textarea or store it as an array

Is it possible to use JavaScript to read an Excel file and convert a single column (identified by name or index) into an array in JavaScript? ...

jqueryhtmlcakephpjqgrid

The arrangement of columns and floating images along with the surrounding white spaces

There are 3 columns, each sized at 33% with images of varying heights inside. When viewed on a device the size of an iPad, I want to change the column sizes to be 50%. However, when I do this, the third column appears in the middle bottom of the top two co ...

htmlimageresponsive-designcss-floatgallery

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...

javascriptphpjqueryhtmlajax

Vue.js and webpack are having trouble loading the images located in the "assets" folder into the Vue components

How can I import images from an assets folder into Vue components? Here is my "Card.vue" component: <template> <div class="container"> <div class="card" style="width: 18rem;"> <!-- Use this <img> tag to load the ima ...

htmlvue.js

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

javascriptcssreactjsmaterial-ui

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

htmlcsswordpresshyperlinktext-decorations

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

How can you alter the background color of a Material UI select component when it is selected?

I am attempting to modify the background color of a select element from material ui when it is selected. To help illustrate, I have provided an image that displays how it looks when not selected and selected: Select Currently, there is a large gray backgr ...

cssreactjstypescriptselectmaterial-ui

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...

javascripthtmlcssreactjsmaterial-ui

Images that are see-through or translucent

Can someone confirm if Internet Explorer supports transparent PNGs now? How about Chrome? ...

htmlpngjpegtransparentgif

What could be causing the iPhone to trim the 20px right padding of my website?

Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...

iphonecss

What impact does CSS scaling transform have on the flow of a document?

I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...

csstransform

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

jqueryhtmlcsstoggle

Different option for positioning elements in CSS besides using the float

I am currently working on developing a new application that involves serializing the topbar and sidebar and surrounding them with a form tag, while displaying the sidebar and results side by side. My initial attempt involved using flex layout, but I have ...

javascripthtmlcss

What is the process for implementing custom CSS styles in Cognos?

I've been working on creating Cognos reports and I'm looking to change the overall design of some specific ones (prompt pages and report pages). Is there a way for me to use different custom CSS files for each individual report? If that's ...

cssbusiness-intelligencecognos

The problem of removing issue divs persists despite Jquery's efforts

Just yesterday, I successfully created a Commentbox using PHP, HTML, and ajax. The beauty of the ajax part is that it allows me to delete a comment without having to refresh the page. To achieve this, I assign a unique id to each comment (div) through the ...

javascriptphpjqueryhtmlajax

What could be causing the lack of functionality in my nested CSS transition?

My markup includes two classes, fade-item and fade. The fade class is nested within the fade-item class as shown below: <a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) > <div class= ...

htmlcsssass

How can you position an element at the bottom of a div using CSS?

Could you please assist me in aligning an element to the bottom of a div using CSS? Below is a screenshot of my webpage for reference: http://prntscr.com/5ivlm8 (I have indicated with an arrow where I want the element to be) Here is the code snippet of m ...

htmlcss

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock