What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Here are my two div elements:

<div class='container'>
  <div class='left'></div>
  <div class='centered'></div>
</div>

I am looking to center the second inner div and have the first inner div positioned on the left side of the centered one. However, I do not want the left div to stick directly to the left side of the screen using float:left. Instead, I would like it to be aligned with the left side of the centered div.

I prefer using flexbox for layout purposes, but I am open to other solutions that do not involve JavaScript and are CSS-only.

htmlcssflexbox

Answer №1

When dealing with a flex container, the children will abide by the alignment rules set by their parent. In this case, to have the left element stick to the left of the centered one, it should be related to the centered element rather than the container itself.

.Container {
  display: flex;
  justify-content: center;
}

.Left {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.Centered {
  background-color: cyan;
  position: relative;
}




/* Demo only */

.Centered, .Left {
  border-radius: 4px;
  padding: 8px 24px;
}
<div class="Container"> 
  <div class="Centered">
    <div class="Left">Left</div>
    Centered
  </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

Tips for assigning dynamic values to ng-model in AngularJS

When a user clicks, I am dynamically appending a div to the DOM. In order to capture the values entered by the user, I need to use ng-model for input fields. Since I cannot predict how many divs the user will append, I want to make the ng-model values dyna ...

angularjshtmlangular-ngmodel

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

Moving the content of a div outside the browser window within an electron application

After cloning the electron quickstart app from GitHub, I noticed that it creates a browser window to display HTML content. The code snippet mainWindow = new BrowserWindow({width: 800, height: 600}) exemplifies this behavior. As I work on creating an app ...

htmlangularjscross-platformelectrondesktop-application

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

javascripthtmlcssangularangular2-template

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...

css

Using jQuery to clear a textarea when a select input is changed

Currently, I am in the process of developing a small text editor that enables users to edit files and create new ones. Here is how I have set up my select menu. <select name="reportname" id="reportname" class="form-control"> <option value="zr ...

javascriptjqueryhtmlajax

Despite adding a content security policy within the meta tag of my HTML, the policy does not seem to be properly enforced

I have implemented the Content Security Policy within the HTML meta tag <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia ...

htmlcontent-security-policy

Place the application bar at the bottom of the screen

I am working on a project aimed at monitoring employees, and I have developed a user interface that allows for modifications within the site. However, there is an issue with the "bottom App Bar" section at the bottom of this interface which has a blue back ...

cssmaterial-ui

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Challenge with Alignment of Fields in Bootstrap's Horizontal Form

I am working on an Angular project with a horizontal form using Bootstrap. I have encountered a slight alignment issue with one of the date fields. The IsMessedUp datepicker input field is not aligned properly, positioned slightly to the left compared to t ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

How can I ensure that the background color of my HTML email blends seamlessly with the color of the email client's background?

As I embark on creating an HTML email template, I am venturing into the realm of developing for emails, which I know can be quite temperamental. The challenge I'm facing is in making sure that the background of my HTML email matches that of the email ...

cssemailhtml-emaildarkmodeapple-mail

Sending form data to PHP script following Javascript verification

After implementing basic validation for a contact form, I encountered an issue where the form would not submit to the PHP file responsible for sending emails. Despite setting the button type as "submit" and defining the form action as "contactform.php", th ...

javascriptphphtml

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

javascriptjqueryhtmlprogress-bar

Looking to align three divs side by side in the center

My goal is to have three buttons aligned side by side, but I want them center-aligned instead of floated to the left. I have already set the display to inline-block and vertical align to top. div.rotateBtn input { background-image: url(""); margin-l ...

htmlcss

Ways to retrieve HTML content from various spans and incorporate the values as classes

Here is my custom HTML: <div class="box"> <ul class="fourcol first"> <li class="feature-item">Description: <span>0</span></li> <li class="feature-item">Description: <span>0</span></ ...

javascriptjqueryhtml

Unable to save a dynamic FormArray within a FormGroup

My FormGroup consists of three FormControl fields and one FormArray field, as shown in the figure below. I need to collect the manager's name from the user. When the add button is clicked, the manager details should be displayed in a table. In the tab ...

htmlangulartypescriptangular6formarray

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

javascriptcssangulartypescript

Can the navbar hamburger in Bootstrap be displayed at a screen size of 992px?

How can I display the bootstrap navbar Hamburger at md(992px) Screen? Here is the code snippet I am currently using: https://i.sstatic.net/OqBTQ.png Any suggestions on what steps I should take? ...

htmlcssbootstrap-4