Is there a way to make all DIVs in the same class have the same height as the tallest div?

I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div

Thank you in advance.

htmlcss

Answer №1

To achieve the desired layout, you have the option to utilize:

display:flex

for your container in most up-to-date web browsers.

If you need compatibility with older browsers like Internet Explorer, consider using:

display:table-cell

within each div element.

Answer №2

To achieve a flexible layout, you can utilize CSS flexbox on the container element. An example is demonstrated below.

CSS

.item{
  background: #333;
  color: white;
  margin: 10px;
  padding: 5px;
}

.container{
  display: flex;
  justify-content: space-around;
}

HTML

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
</div>

Answer №3

If you want to achieve this layout, consider using flexbox:

Here is a helpful online resource:

For example: 

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    background: gray;
    margin: 5px;
}
<div class="flex-container">
    <div class="flex-item">
        Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />Test <br />Test <br />
    </div>
</div>

Answer №4

Include a wrapper row.

XHTML

      <div class="row">
      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>  
          </tr>
          <tr>
            <td>item2</td>      
          </tr><tr>
            <td>item1</td> 
          </tr>
          <tr>
            <td>item2</td>     
          </tr><tr>
            <td>item1</td>    
          </tr>
          <tr>
            <td>item2</td>       
          </tr><tr>
            <td>item1</td>   
          </tr>
          <tr>
            <td>item2</td>        
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>      
          </tr><tr>
            <td>item1</td>      
          </tr>
          <tr>
            <td>item2</td>       
          </tr><tr>
            <td>item1</td>     
          </tr>
          <tr>
            <td>item2</td>       
          </tr><tr>
            <td>item1</td>    
          </tr>
          <tr>
            <td>item2</td>   
          </tr>
          <tr>
            <td>item2</td>     
          </tr><tr>
            <td>item1</td>       
          </tr>
          <tr>
            <td>item2</td>     
          </tr>
        </table>
      </div>
      </div>

Cascading Style Sheets

.row{
  border: 1px solid red;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.checklist {
  border: 1px solid #ccc;
  overflow-y: scroll;
  max-width: 200px;
  max-height: 120px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;      
  -webkit-flex: 1;
  -ms-flex: 1;      
  flex: 1;
}
.checklist table {
  height: auto;
 width: 160px;  
}

Answer №5

If you want to achieve this functionality, using jQuery is a simple solution.

Step-by-Step Guide 1. Define a specific height for the checkbox elements. 2. Identify the div that contains the highest number of checkbox elements. 3. Set the height for all checklist elements by multiplying the highest number of checkbox elements with the specified checkbox element height.

jQuery( document ).ready( function() {
    var mostChecklist,
        checklists = [ ],
        checkboxHeight = '30'; // Feel free to adjust this value

    // Calculate the length of all checklists
    jQuery('.checklist')
    .each( function( i, checklist ) {
        // Count all input checkboxes within each checklist
        checklists.push( 
            jQuery( checklist ).children('input:checkbox').length 
        );
    });

    // Find the maximum number in the checklists array
    mostChecklist = checklists.reduce(
        function( a, b ) {
            return Math.max( a, b );
        }
    );

    // Apply the calculated height to all checklist elements
    jQuery('.checklist').css( 'height', checkboxHeight * mostChecklist +'px' );
});

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

Is there a way to adjust the dimensions of the <audio> tag using CSS?

//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...

html

What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...

javascripthtmljquerycssweb

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

htmlcssscroll

JavaScript and jQuery validation issues persisting

Here is the HTML code I am using: <script src="js/validate.js"></script> <label>FIRST NAME:</label> <td> <input type="text" class="firstname" id="firstname" onKeyUp="firstname()" /> </td> <td> <label id=" ...

javascripthtmlvalidation

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this. Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-rea ...

javascripthtmlcssnode.jsreactjs

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

phpjavascripthtml

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

Ways to identify an element within a webpage

I'm currently working on creating a chrome extension that can detect the presence of specific elements on a webpage. The goal is to have this extension automatically run every time a new page is opened and display a popup message if the element is fou ...

javascripthtml

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

javascriptjqueryhtmlcanvasline

Ways to transition to an iframe window

I am having difficulty selecting an iframe popup window as it is not coming into focus. Below is the image of the popup window along with the button I am attempting to click: https://i.stack.imgur.com/VzkOX.png This is the code snippet that I have been ...

pythonhtmlseleniumselenium-webdriver

Please indicate the maximum number of digits allowed after the decimal point in the input

My input form uses a comma as the decimal separator: HTML: <form id="myform"> <label for="field">Required, decimal number:</label> <input class="left" id="field" name="field"> <br/> <input type="submit" va ...

javascriptjqueryhtmlregex

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

javascripthtmljsonanimationchart.js

Mastering the Art of Manipulating Z-Index Stacking Context in CSS Using Transforms

I'm struggling to position the red square on top of the table. After reading articles about Z-index Stacking Context and browsing through this stack overflow page about overriding CSS Z-Index Stacking Context, I still can't seem to figure it out. ...

htmlcss

Tips for altering the color of the email text as it is being typed into the input field

Is it possible to customize the text color while typing email in an input field? <form action=""> <input type="email" name="mail" id="" placeholder="Your Email"& ...

htmlcssforms

Is it feasible to exclusively apply Twitter Bootstraps .navbar-fix-to-top on mobile devices?

I am working on a website using Twitter Bootstrap 3 and I have implemented the following navbar: <div class="col-xs-12 col-md-10 col-md-offset-1"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> ...

htmlcsstwitter-bootstrap

The :empty selector is failing to function properly in @media print queries

Currently, I am working in Twig on Symphony and have encountered an issue with an empty div that needs to be hidden in print mode. <div class="form-fields__list"> </div> Surprisingly, the :empty selector works perfectly fine on the screen, bu ...

cssprintingmedia-queriesselector

What is the best way to hide the background of an extension's HTML?

Currently, I am working on developing a Chrome extension for a university project. However, I am facing challenges in making the background or body of the extension's HTML completely transparent to achieve a cleaner interface. The issue specifically l ...

javascripthtmlcssjson

Global setting of font size ratio in Material UI library

After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...

cssmaterial-uifont-size