Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, if one section's title spans three lines, the titles in the other two sections should also be of similar height even if they are shorter. I have attempted to implement this design but haven't succeeded so far.

<div class="container">
  <div class="card">
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq
    </div>

    (Additional code snippets here)
  </div>
</div>

<style>
  .container {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.card {
    width: 22%;
    height: 600px;
    background: radial-gradient(black, transparent);
    align-self: stretch;
}
.row{
  border-bottom: 1px solid;
}
</style>

I aim to maintain consistent height for the green sections across all three columns.

javascripthtmlcssflexboxcss-grid

Answer №1

    <div class="container">
      <div class="heder">
        <div class="row title" style="background-color: yellowgreen;">Greetings from Tariq!</div>
        <div class="row title" style="background-color: yellowgreen;">Greetings from Tariq!</div>
        <div class="row title" style="background-color: yellowgreen;">Greetings from Tariq
          Greetings from Tariq
          Greetings from Tariq
          Greetings from Tariq
    
        </div>
      </div>
      <div class="content">
        <div class="card">
    
          <div class="row">Greetings from Tariq
            Greetings from Tariq
            Greetings from Tariq
            Greetings from Tariq
    
          </div>
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
    
        </div>
        <div class="card">
    
          <div class="row">Greetings from Tariq
            Greetings from Tariq
            Greetings from Tariq
            Greetings from Tariq
    
          </div>
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
        </div>
    
        <div class="card">
    
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaGreetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
          <div class="row">Greetings from Tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Greetings from Tariq</div>
    
        </div>
      </div>
    
    
    </div>
    
    <style>
      .container {
        display: flex;
        flex-direction: column;
        /* gap: 14px; */
        /* justify-content: center; */
      }
    
      .heder {
        display: flex;
        justify-content: center;
      }
    
      .heder .title {
        width: 22%;
        height: auto;
        margin: 0 10px;
      }
    
      .content {
        display: flex;
        justify-content: center;
      }
    
      .content .card {
        margin: 0 10px;
      }
    
      .card {
        width: 22%;
        height: 600px;
        background: radial-gradient(black, transparent);
        align-self: stretch;
      }
    
      .row {
        border-bottom: 1px solid;
      }
    
      .title {
        height: fit-content;
      }
    
    </style>

Answer №2

.container { border-bottom: 1px solid black; min-height:200px } Give this a shot

Answer №3

Using JavaScript to Adjust Row Heights

This particular script is designed to gather the height values of rows and then store the highest value in an array for each row type. Subsequently, it adjusts all rows to match this maximum height value.

const container = document.getElementsByClassName("container")[0];
const cards = container.children;

let requiredHeights = [];

const getRequiredHeights = (cards) => {
  [...cards].map((card) => {
    rows = card.children;
    [...rows].map((row, index) => {
      let height = 0
      if(requiredHeights[index]!=undefined) {
        height = requiredHeights[index];
      }
      let rowHeight = row.offsetHeight;
      if(rowHeight > height) {
        requiredHeights[index] = rowHeight;
      }
    })
  }) 
}

const setRowHeights = (cards) => {
  [...cards].map(card => {
    rows = card.children;
    [...rows].map((row, index) => {
      row.style.height = requiredHeights[index] + 'px';
      console.log(row.style.height);
    })
  })
}

getRequiredHeights(cards);
setRowHeights(cards);

To view the working example of this solution, you can visit this CodePen link: https://codepen.io/Nadir_Alishly/pen/GRYKREp

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

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

javascripthtmlcss

Leverage array mapping functionality to generate React components within a separate component

Currently, I am retrieving data from an API and storing the results in an array. The issue arises when trying to map the array to a child component since it is initially empty. How can I ensure that the array mapping only executes when there is data in the ...

javascriptreactjs

Tip Sheet: Combining Elements from an Array of Objects into a Single Array

When I invoke the function getAllUsers() { return this.http.get(this.url); } using: this.UserService.getAllUsers().subscribe(res => { console.log(res); }) The result is: [{id:1, name:'anna'}, {id:2, name:'john'}, {id:3, name ...

javascripttypescript

How can I omit spaces in the HTML output when saving a data frame using to_html?

After using the to_html method, I noticed that there are \n after > and spaces before <. Is there a way to prevent them from being saved? Here is an example of what I have: <table border="1" class="dataframe"> <t ...

pythonhtmlpandasdataframe

What is causing this iframe ads code to so severely disrupt the functionality of Internet Explorer when using document.write

So, I've recently encountered an issue where a certain problem arose, and although I managed to fix it, I am still curious about the root cause behind why it occurred in the first place. TL;DR The use of Google-provided conversion tracking code that ...

javascripthtmlinternet-explorerdocument.write

The AngularJS $http.post method mimicking a successful $.ajax request is causing a 401 UNAUTHORISED error

I have been working on rewriting a functional $.ajax server call to utilize AngularJS $http.put. However, the $http method returns a 401 unauthorized error. The original ajax call I am attempting to rewrite is structured like this: $.ajax({ url: domain ...

javascriptajaxangularjshttp-headers

Converting JSON Data to Map Markers on Google Maps

Currently, I am attempting to pass a Json String into my Javascript code in order to create a list of markers on a Google Map. The map code functions properly as I have successfully tested it with a hard coded Json Object. However, now I need to fetch the ...

javascriptjsonasp.net-mvcgoogle-maps

What is the best way to extract all <tr> elements from a <tbody> and then convert them into a String?

Below is an example of an HTML table: <table id="persons" border="1"> <thead id="theadID"> <tr> <th>Name</th> <th>sex</th> <th>Message</th> </ ...

javascriptjquerystringhtml-table

Encapsulate ng-style within quotation marks

I am trying to hide a span if the value of filters[*index*] is empty. var span = "<span ng-style='{ 'display': filters[" + filterIndex + "] == '' ? 'none' : 'inline-block' }'></span>" cell.html ...

javascriptangularjs

Craft fresh items within HTTP request mapping

I am currently working on a function that subscribes to a search api. Within the map function, my goal is to transform items into objects. I haven't encountered any errors in my code, but the response always turns out empty. Here's the snippet o ...

javascriptangularhttptypescript

Vue 3 + Vite: The router path was not found

I'm currently working on a project using Vue 3 and Vite, where I need to verify if the user is logged in with AWS Cognito before accessing the main page. Here's an example of my router.js: import { createRouter, createWebHistory } from &apo ...

javascriptnode.jsvuejs3amazon-cognitovite

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

cssmaterial-ui

Design a TypeScript interface inspired by a set static array

I am working with an array of predefined strings and I need to create an interface based on them. To illustrate, here is an example of pseudo-interfaces: const options = ["option1", "option2", "option3"]; interface Selection { choice: keyof options; ...

javascripttypescript

The content section sits discreetly behind the sidebar

Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...

javascripthtmlcssflaskbootstrap-5

Horizontal Panning Feature for D3 Horizontal Bar Charts

I am working on a D3 Bar Chart and I would like it to have horizontal panning functionality similar to this example: https://jsfiddle.net/Cayman/vpn8mz4g/1/. However, I am facing an overflow issue on the left side that I need to resolve. Below is the CSV ...

javascripthtmld3.jsdata-visualizationvisualization

Re-Rendering Component in React Continuously Keeps Checkbox Checked Event Flowing

I am working on a material ui checkbox formgroup that is generated dynamically based on data received from an API. Essentially, the user is presented with a question and a set of answers. The user checks all the valid answers and clicks 'next'. I ...

javascriptreactjsmaterial-ui

What is the reason behind utilizing the external 'this' within the inner function in Vue: $this=this?

Recently, I came across some code online that included a line $this=this. My initial interpretation was that this line assigns the 'this' of the outer function to a variable, allowing it to be used in the inner function as well. However, upon fur ...

javascriptvue.js

encountering an issue with the react hook useHistory leading to an error

I recently encountered an issue while implementing useHistory() in my code. Previously, I had used it without any errors, but now I'm getting the following error in this component: Line 6:18: React Hook "useHistory" is called in function "showPost" ...

javascriptreactjsreact-hooksreact-router-dom

What is the best way to change a JavaScript variable into a PHP variable?

I am interested in converting my JavaScript variable to a PHP variable... Currently, I have the following scenario - in the code below there is a variable e, but I would like to utilize e in PHP as $e: <script> function test() { var e = documen ...

phpjavascript

The React forwardRef Higher Order Component is failing to provide a reference to the container element

I'm currently working on creating a higher order component (HOC) for closing an element when clicked outside of its space, known as a generic close on outside solution. In my understanding, this can be achieved using forwardRef and HOC implementation ...

javascriptreactjshigher-order-components