Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen.

.parent {
    display: flex;
    justify-content: space-between;
}

.left {
   flex-grow: 1;
   flex-basis: 0;
   background-color: blue;
}

.right {
   background-color: red;
   flex-grow: 1;
   flex-basis: 0;
}

.center {
  background-color: green;
}

.parent-2 {
  margin-top: 20px;
  margin-left: 30px;
}

.parent-3 {
  margin-top: 20px;
  margin-left: 60px;
}

https://i.stack.imgur.com/6Z5FZ.png The margin from the left of the last two items is causing their contents to be misaligned vertically. I want to align the red and green parts with each other while keeping the blue part misaligned. Is there a way to achieve this alignment?

Edit: I also need this alignment to work automatically for any number of nested items.

htmlcss

Answer №1

Make sure to include the flex-basis property and use the calc function for calculations

.parent {
    display : flex;
    justify-content : space-between;
}

 .right {
   background-color: red;
   flex: 1 0 0;
}

.center {
  background-color: green;
}

.parent-2 {
  margin-top: 20px;
  margin-left: 30px
}

.parent-3 {
  margin-top: 20px;
  margin-left: 60px
}

.left {
    flex: 0 0 33.33%;
    background-color: blue;
}
.parent.parent-2 .left {
    flex: 0 0 calc(33.33% - 20px);
}
.parent.parent-3 .left {
    flex: 0 0 calc(33.33% - 40px);
}
<div class="parent">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong text.
  </div>
</div>
<div class="parent parent-2">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong text.
  </div>
</div>
<div class="parent parent-3">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong 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

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox

After the checkbox is clicked, I must send a boolean value to the function through the input flag in AngularJS

<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()" ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}"> Within this p ...

javascripthtmlangularjs

Step-by-step guide for activating a text box when a check box is marked

I'm looking to activate and deactivate two text boxes when a check box is selected. Currently, only one text box is enabled when the check box is checked. How can I modify my code to enable and disable two text boxes based on the check box status? Her ...

javascriptjqueryhtml

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...

htmlcsstwitter-bootstrapbootstrap-4

retrieve the identification number associated with a specific value

How can I retrieve the value of this ID, which is sent from the controller and displayed in the table? This is my HTML code: <tbody class="no-border-x"> <tr> <td id="id"></td> <td id="nm_kegiatan"></td> ...

javascriptjqueryhtml

Incorporate an external hyperlink into a tabPanel or navbarMenu within an R Shiny application

I am struggling with adding external hyperlinks to the tabs and dropdowns in a navbar setup using Shiny (implemented with bootstrapPage). While I have come across solutions for linking to other tabs within a Shiny app, my goal is to link to an external web ...

htmlrshiny

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

javascriptjqueryhtmlknockout.jssass

Preventing data loss upon submitting a form (PHP)

Currently, I have an HTML file that allows users to select appointment times for specific days of the week. Once they click submit, a PHP file generates and displays a calendar with the chosen times as checkboxes. My goal is to enable users to input their ...

phphtmlformspostinput

Preserve input values after form submission in <?php> code block

I would like to retain form values after submission. I have come across some techniques that claim to do just that: However, when I try to run the HTML file, I encounter two issues: firstly, the code does not function as intended and secondly, PHP snippet ...

phphtmlforms

Load and execute a dynamically created script in JavaScript at the same time

I am exploring the option to load and evaluate a script from a third-party synchronously. Here is an example that currently works well: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...

javascripthtml

Switch between two PHP files with a toggle feature using jQuery click event

Need help with toggling between two PHP files - cab.php and d3.php. Toggling within the same file works fine, but encountering issues when trying to toggle from one file to another. function botaod2mostraesconde() { $(".wrapd2").toggle(); $( ...

javascriptphpjqueryhtml

React component rendering twice due to width awareness

In a React component that I've developed, I have utilized ResizeObserver to track its own width. Within this component, two divs are rendered with each having a "flex: 1" property to ensure equal width distribution. Under certain conditions, such as w ...

javascripthtmlcssreactjs

Tips for aligning a logo in the center of a navigation bar

I'm struggling to center a logo within the navigation bar of a website I am designing. Despite my attempts, I have not been successful in achieving the desired result. My goal is to have the logo positioned in the middle of the navigation bar, with ot ...

htmlcss

Issue encountered with AJAX multiple image uploader

I'm attempting to create an PHP and JavaScript (jQuery using $.ajax) image uploader. HTML: <form method="post" action="php/inc.upload.php" id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file[]" a ...

javascriptphpjqueryhtmlajax

Creating a nested structure using JQuery with dynamically generated divs and select tags

My current task involves creating forms and generating corresponding div elements, but my main concern lies elsewhere. What I am seeking guidance on is how to establish a hierarchy among these dynamically generated div elements using the <select> ta ...

jqueryhtml

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

phpjqueryhtmlformsmysqli

Tips for integrating v-virtual-scroll with v-table?

My Vuetify table is handling a large amount of data – 300 rows with 20 columns, some of which have calculated rowspans. To improve performance, I'm considering using the v-virtual-scroll component. I came across this sample code, which doesn't ...

javascripthtmlvue.jsvuetify.jsvuetifyjs3

Tips for showing text beyond the confines of a <div></div> container

<div class="signup"> <div>Tenxian アカウントに必要な情報</div><br/> </div> <br/><br/><br/><br/><br/><br/> <div align="center">@2009 Tenxian &nbs ...

csshtml

Obtaining Google AAID Using a Mobile Browser (JavaScript)

I've been looking for information online without much success regarding this topic. I am interested in retrieving a user's Google Advertising ID (AAID) through my website when they visit using a mobile browser. I assume it could be done with som ...

javascriptandroidhtmlmobilegoogle-advertising-id