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

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...

javascriptjqueryhtmlcssshow-hide

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

javascripthtmlcssajaxfullcalendar

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly? .parent_div { position: relative; background: lightgreen; width: 1200px; margin: auto; } .child_div { position: relative; ...

htmlcss

How can text be extracted from BeautifulSoup without displaying the opening tag and before the <br> tag?

I have recently started learning Python and Beautiful Soup, and I've spent a significant amount of time trying to solve this particular issue. I am looking to extract three specific text elements from a <div> that does not have a class attribu ...

pythonhtmlparsingbeautifulsouphtml-parsing

Tips for obtaining immediate model updates within Agility.js

I am currently facing an issue with Agility.js regarding the 'change' event. This event is triggered every time a model within the object is modified. However, in my case, the model only gets updated when losing focus or pressing enter. I would l ...

javascriptjqueryhtml

Shape with smoothed corners

Is there a way to create rectangles with rounded corners using CSS, SVG, or other methods while maintaining straight horizontal and vertical sides? I attempted to use border-radius for the rounded corners, but found that it created curved edges on both ho ...

htmlcsssvgcss-shapes

Dynamically generated table causing issues with Jquery functionality

Currently, I am facing an issue with my webpage that utilizes the jquery template plugin for dynamically loading data into a table via a json call on page load. My goal is to include clickable elements like buttons or divs within the table columns, which w ...

jqueryhtmlajax

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

Conceal/Reveal sliding from the left

I'm working on a code that allows me to hide/show content. I need the div to hide as it moves left. Does anyone know how to achieve this effect? Check out my code on FIDDLE JavaScript $(document).ready(function() { $("#button").toggle(function() ...

jqueryhtml

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input

My client has a unique request - they want to be able to upload a file in PHP without using the traditional <form> tag or a submit button. While I am familiar with file uploads in PHP, I am unsure of how to achieve this without utilizing the <for ...

javascriptphpjqueryhtmlajax

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

phphtmlfacebookcurl

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra

How can JavaScript pass a variable through the URL?

I am attempting to pass a variable through the URL: http://localhost/new_wiki/test.php?id=http://example.com In my code, I have var first = getUrlVars()["id"];. This line is supposed to pass the value but it doesn't seem to be working. Can someone pl ...

javascriptphphtml