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

Using JQuery to parse an XML file and automatically redirecting the page if a specific attribute equals "Update"

Updated I've made some edits to clarify my request. My website is built using HTML5, CSS3, and JQuery, resulting in all content being on one page. During updates, I want the ability to set an option in a configuration file so that when users visit m ...

javascriptjqueryhtmlcssweb-config

Using PHP/MySQL to enable users to make changes to their account details

I've successfully set up 2 pages update.php edit.php We begin on edit.php, so here is the script for edit.php <?php session_start(); $id = $_SESSION["id"]; $username = $_POST["username"]; $fname = $_POST["fname"]; $password = $_POST["password"]; ...

phphtmlmysqldatabasephpmyadmin

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

How to create a slideToggle effect for nested ul and li elements

Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected. I have created a jsfiddle The setup involves nested ul elements being used as dropdowns, with headers tha ...

jquerycssnestedhtml-lists

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

cssalignment

What is the best way to retrieve both the start and end date values from a React date range picker component

I have integrated a date range picker npm package called react-date-range into my code. On my screen, there is an "Apply Dates" button. When this button is clicked, I want to retrieve the selected date range value. How can I achieve this onclick event? ...

javascripthtmldatepickerreactjsnpm

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

Bootstrap dropdown feature automatically rearranges all items in my navigation bar

I recently set up a navbar for my website, but I'm struggling to grasp the concept of positioning items with Bootstrap. One issue I encountered is that when I click on the dropdown button (profile image), it causes all the items in my navbar to shift, ...

htmlcssbootstrap-4

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

javascriptjqueryhtml

Change the div attribute when clicking on a corresponding link

For the full code, please visit: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview Here is an angular ui bootstrap accordion with nested panels: <uib-accordion close-others="oneAtATime"> <div ng-repeat="sub in subdivisions"> < ...

javascripthtmlangularjstoggleangular-ui-bootstrap

Error: the function is not defined, therefore the variable is being passed

I'm attempting to pass a variable in the URL in order to automatically check a radio button on a different page depending on which link is clicked. However, I keep encountering an "Uncaught ReferenceError: radio_onload is not defined" error. Could th ...

javascripthtmlradio-button

Proper syntax for jQuery's insertAfter() method when using selectors

I am working with a div <div id="imgDIV"><h4>My Debug DIV</h4></div> and I am trying to add a debug message at the top of the div, right after the first h4. This way, my most recent messages will be displayed at the top. $(' ...

jqueryhtmljquery-selectors

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

javascripthtmljqueryajax

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar

QML: Inside and outside styling attributes

Within my QML Text (RichText) elements, I have incorporated multiple CSS-styled html elements using the inline 'style' attribute within each tag (e.g. <code style=\"background-color:black; text-indent: 10px\"></code&g ...

cssqtqml

Having trouble with inserting data into MySQL database using PHP?

I am currently facing an issue while attempting to insert data into a MySQL database. Although no errors are appearing during the process, when I try to browse the data, it doesn't seem to be getting inserted into the database. Below is my code, could ...

phphtmldatabaseinsert

Tips for aligning an icon vertically within a span tag

I have a span similar to this: <span class="indicator"></span> Sometimes this span contains numbers like: <span class="indicator"> <span>10</span> </span> Other times it may display Kendo-UI icons, such as: < ...

htmlcsskendo-ui

The server sends a Status=304 response to one browser's GET request, while providing a 200 response to another browser's request

My focus right now is on troubleshooting my .htaccess file, in which I have the following code: <FilesMatch "\.(html|swf)$"> <IfModule mod_headers.c> Header set Cache-Control "no-cache, public" </IfModule&g ...

javascripthtmlapache.htaccess

How to control the audio currentTime using Angular 2 component

Here is the HTML code snippet that creates an HTML5 audio element: <audio id ="audio2" controls="controls" autoplay="false" (canplay)="CanPlay($event)"> <source src="http://localhost:51657/Audio/1" type="audio/mp3"> </audio> In the ...

htmlangularhtml5-audioangular2-template

WP How can I modify a particular thumbnail size with a custom CSS class?

I have been attempting to use add_image_size for my custom thumbnail resize, but it seems to be having trouble maintaining the thumbnail size at 220 x 220. Instead, it keeps changing the height to 167 pixels. As a workaround, I am exploring a CSS-based sol ...

csswordpress