When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Question

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Within my design, I have several rows with 3 columns each. Every column contains a main content section labeled SavedSearchBox-content (with various permutations that affect its height) and a footer labeled SavedSearchBox-footer.

To structure this layout, I am utilizing flexbox in order to create 3 columns with space between them, meaning only the middle column has horizontal spacing.

Here is the HTML template for a sample row featuring 3 columns and 3 different variations:

Column with Pill and button
Column without Pill or button
Column with Pill but no button

<div class="SavedSearches-wrapper">
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content">
      <h1 class="SavedSearchBox-title">This is a longer title for testing</h1>
      <p class="SavedSearchBox-tagline">This is a tag line</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount">
        <div class="Pill">4 New</div> <strong>searches</strong>
      </div>
    </div>
    <div class="SavedSearchBox-footer"><a class="Button ">Subscribe to this Alert</a></div>
  </div>
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content"><h1 class="SavedSearchBox-title">This is a title</h1>
      <p class="SavedSearchBox-tagline">This is a tagline</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount"></div>
    </div>
    <div class="SavedSearchBox-footer">
      <div class="RadioListToggler SavedSearchBox-Toggler">
        <a href="javascript:;" class="RadioListToggler-Link">Change alert frequency</a>
      </div>
    </div>
  </div>
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content"><h1 class="SavedSearchBox-title">This is a title</h1>
      <p class="SavedSearchBox-tagline">This is a tagline</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount">
        <div class="Pill">6 New</div> <strong>searches</strong>
      </div>
    </div>
    <div class="SavedSearchBox-footer">
      <div class="RadioListToggler SavedSearchBox-Toggler">
        <a href="javascript:;" class="RadioListToggler-Link">Change alert frequency</a>
      </div>
    </div>
  </div>
</div>

In terms of the styling, I have applied CSS rules to the wrapper element using flex properties and justify content as follows:

.SavedSearches-wrapper {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
}

.SavedSearchBox {
    max-width: 340px;
    width: calc((100%/3) - 64px);
    border: 1px solid #d8d8d8;
    display: inline-block;
    vertical-align: top;
    margin: 20px 0px;
    background: #ffffff;
}

.SavedSearchBox .SavedSearchBox-content {
    padding: 22px 22px 0px 22px;
}

My query pertains to ensuring all instances of SavedSearchBox-content have consistent heights while maintaining the 3 column layout with space-between. Ideally, I would prefer to avoid a JavaScript-based solution if possible.

Links:

JSFiddle

html css flexbox

Answer 1

Answer №1

It seems that achieving equal heights for elements using only CSS is not possible, but with a simple jQuery script, this can be accomplished.

 function adjustHeight() {
  var tallestElement = 0;

  // Clear the height
  $('.SavedSearchBox-content').each(function() {
    $(this).removeAttr('style');
  });

  // Determine the tallest element
  $('.SavedSearchBox-content').each(function() {
    if ($(this).height() > tallestElement) {
      tallestElement = $(this).height();
    }
  });

  // Set the same height for all elements
  $('.SavedSearchBox-content').each(function() {
    $(this).height(tallestElement);
  });
};
var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustHeight, 1);
});

To automatically adjust the height when the page loads, add a load event. https://jsfiddle.net/sqk8howx/1/

-> Note: The functionality may only work when resizing the window.

Answer 2

It seems that achieving equal heights for elements using only CSS is not possible, but with a simple jQuery script, this can be accomplished.

 function adjustHeight() {
  var tallestElement = 0;

  // Clear the height
  $('.SavedSearchBox-content').each(function() {
    $(this).removeAttr('style');
  });

  // Determine the tallest element
  $('.SavedSearchBox-content').each(function() {
    if ($(this).height() > tallestElement) {
      tallestElement = $(this).height();
    }
  });

  // Set the same height for all elements
  $('.SavedSearchBox-content').each(function() {
    $(this).height(tallestElement);
  });
};
var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustHeight, 1);
});

To automatically adjust the height when the page loads, add a load event. https://jsfiddle.net/sqk8howx/1/

-> Note: The functionality may only work when resizing the window.

Answer 3

Answer №2

Flex has always been my preferred choice, but after starting to explore css-grid, I realized its immense power for positioning and creating grids.

Here's the change I made:

.SavedSearches-wrapper {
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  padding: 1rem;
}

.SavedSearchBox {
  border: 1px solid #d8d8d8;
  display: inline-block;
  vertical-align: top;
  background: #ffffff;
}

I switched from using display: flex to display: grid. Using grid-template-columns: allowed me to define the columns with equal fractions - 1fr 1fr 1fr. Each column is divided into a fraction. I also added a grid-column-gap for adjusting the spacing between grid elements easily.

To prevent the elements from reaching the edges, I included padding in the grid-container.

The width restrictions for SavedSearchBox were removed as the width is now defined by the parent SavedSearches-wrapper under grid-template-columns.

If this aligns with your goal, check out this JS Fiddle example.

(Don't forget to add webkit prefixes for cross-browser functionality.)

Hope this explanation helps. Happy Coding!

body {
  margin: 0;
}

.SavedSearches-wrapper {
    padding: 0;
...
...
...
    </div>
</div>

Answer 4

Flex has always been my preferred choice, but after starting to explore css-grid, I realized its immense power for positioning and creating grids.

Here's the change I made:

.SavedSearches-wrapper {
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  padding: 1rem;
}

.SavedSearchBox {
  border: 1px solid #d8d8d8;
  display: inline-block;
  vertical-align: top;
  background: #ffffff;
}

I switched from using display: flex to display: grid. Using grid-template-columns: allowed me to define the columns with equal fractions - 1fr 1fr 1fr. Each column is divided into a fraction. I also added a grid-column-gap for adjusting the spacing between grid elements easily.

To prevent the elements from reaching the edges, I included padding in the grid-container.

The width restrictions for SavedSearchBox were removed as the width is now defined by the parent SavedSearches-wrapper under grid-template-columns.

If this aligns with your goal, check out this JS Fiddle example.

(Don't forget to add webkit prefixes for cross-browser functionality.)

Hope this explanation helps. Happy Coding!

body {
  margin: 0;
}

.SavedSearches-wrapper {
    padding: 0;
...
...
...
    </div>
</div>

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Answer №1

Answer №2

Similar questions

What distinctions are there between placing a `<link rel="stylesheet" href=..video.scss>` in the index.html versus utilizing `import '../video.scss'`?

How can I prevent a browser from allowing users to select an image tag?

Every time I refresh the page, new data is inserted into the MySQL database

Using Jquery ajax to make real-time updates to a MySQL database

Vertically animating an image using jQuery

How can I apply both Css and Bootstrap styles to an element in Next.js?

Is it possible to merge two HTML selectors using jQuery?

Creating a Simple HTML Table Using PHP Arrays

Mastering the art of carousel div creation with Bootstrap

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

The document type specified in the HTML validation process does not support the use of the "hr" element

Reactjs encountering issues loading css file

Employing the include functionality within PHP

Swap out the image backdrop by utilizing the forward and backward buttons

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

Bootstrap 3 Implementation of a Clear Navbar

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

The `required` attribute is ineffective when used with the `<form>` element

Use Jquery to locate and modify any occurrences of the div text through find and replace