Vertically aligning content within neighboring flexbox containers

I am facing an issue with stacking multiple items, such as cards, horizontally with equal height. While the cards are aligning stack-wise, the image and text within each card are not adjusting to the maximum height among the cards, causing misalignment. As a result, the buttons at the bottom of each card do not line up properly.

Despite following this tutorial, which showcases a similar setup with three cards, the third card's image height is set via CSS. 

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
}
/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/
.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
                display: flex;
                vertical-align: middle;
                align-items: center;
                justify-content: center;
                max-width: 100%;
}

.partner-card-content p /*, .card-content .image-container*/
{
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}
/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
  
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

How it should show:

https://i.sstatic.net/lAulQ.png

The illustration from the tutorial on CodePen demonstrates proper alignment of h2, text, and link content:

https://i.sstatic.net/Jf8Um.png

htmlcssflexbox

Answer №1

Summary:

Unfortunately, aligning flexbox items in adjacent flexboxes is not currently supported in CSS. To achieve this, utilizing sub-grids would be necessary to address variable section sizes within a card.

Flexbox Approach:

If setting a min-height for the partner-image-container, consider applying a similar constraint to the a element or implementing an ellipsis for single line display. Below showcases how to include an ellipsis:

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* ADDED */
}

.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p {
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}

.primary-button { /* ADDED */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>;

  ... Additional partner cards ...

</div>

To ensure correct alignment, set min-width: 0 for partner-card-content to override default settings for flexbox on the flex axis. For further insights, refer to the examples below:

  • Flexbox affects overflow-wrap behavior

  • Flexbox resize and scrollable overflow

  • Why don't flex items shrink past content size?

CSS Grid Alternative:

Alternatively, utilize CSS Grid Layout for more flexibility - achieving dynamic card layout with varying section heights. Here's a demonstration using 3 cards arranged horizontally:

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  grid-column-gap: 10px;
}

.partner-card, .partner-card-content {
  display: contents;
}

.partner-card-content .partner-image-container {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p {
  border: 1px solid red;
  margin: 0;
}

.partner-card-content a {
  border: 1px solid;
}
<div class="partner-cards">
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>;
  
... Additional partner cards ...
  
</div>

Note that while providing some control over layouts, using display: contents may limit customization regarding card structure. Implementation of sub-grids promises enhanced layout solutions. Refer to relevant discussions below:

  • Wrap CSS grid with auto placement

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

Setting the position of the center to be relative inside a table cell

I need help with centering a +/- animation within my table rows to create an accordion toggle effect for revealing more information. Despite finding a nice looking animation, I'm struggling to position it correctly within the td element in my code. He ...

htmlcsscss-positionaccordion

Once the script is imported, the functionality of the bootstrap slider ceases to operate

Once the script is imported, the bootstrap slider ceases to function properly. Adding this script causes the issue: <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> An error appears in the console: jquery.min.js:3 Unca ...

phpjqueryhtmlajaxbootstrap-4

Material-ui 4.11.4 - Grid: For items to be displayed correctly in a column, it is necessary to set the container direction to 'row' (??)

I have a requirement to display multiple divs in a column layout, centered along the page axis and stretched in width based on the available space. I am currently using the latest version (4.11.4) of material-ui which includes both the <Grid> contain ...

htmlcssmaterial-uicss-grid

What is the procedure for incorporating JavaScript into my tic-tac-toe game's HTML and CSS?

I have created a simple Tic Tac Toe game using HTML and CSS. Although there is no embedded Javascript, I do reference a Javascript file for functionality. Can anyone provide me with the most straightforward Javascript code that will display an 'X&apos ...

javascripthtmlonclicktic-tac-toe

Tips for creating multiple full-screen overlays in HTML

I am new to the world of web development and I am currently working on implementing a set of buttons that will trigger specific overlays when clicked. I found the following code snippet on W3schools which creates a button along with an overlay effect. < ...

javascripthtmlcss

Efficiently incorporate JavaScript libraries with corresponding CSS in webpack

Feeling exhausted from downloading js and css libraries manually each time, I decided to explore npm and webpack when starting a react project. However, I encountered some challenges: While using npm install is convenient, I still need to locate where th ...

cssnode.jsnpmwebpackbundle

Using the jquery plugin Sidr in Rails: A complete guide

I've been attempting to integrate the jQuery sidr plugin into my Rails project on Codecademy, but unfortunately, it's not functioning as expected. To view the page, simply click here: If you notice, the menu icon at the top left takes some time ...

javascriptjqueryhtmlcssruby-on-rails

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table? css, html <table border="1" style="width:100%; border-collapse: collapse"> <tr> <th>Prepared By:</th> <th>Released ...

htmlcss

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...

cssreactjsformsmaterial-uijss

Is there a way to display error messages next to the input field in Bootstrap 4?

https://i.sstatic.net/0B1rM.png I am interested in changing the placement of error messages to the right side instead of the bottom of the "By" input element. Here is the code snippet: <div class="row "> <div class="c ...

htmlcssbootstrap-4styles

What are the steps to customize the color of an icon and text when clicked or when hovering over them

I just entered the world of coding and am currently immersed in a project. Right now, I have a side navbar and I'm attempting to change the color of the icon and text when I hover over it or click on a route. For instance, when I click on the Home lin ...

javascriptcssreactjsbootstrap-5styling

top approach for transforming form data into JSON format

My task is to convert data from JSON format in order to send it to a webAPI. I have a popup form called from page1: <form id="popupForm" method="post" class="form-horizontal" action=""> <div class="form-group"> <label class="col-sm-4 c ...

jqueryhtmljson

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

To ensure accessibility for users who may have javascript disabled, we follow a company standard of developing our web pages accordingly. Our target demographic still includes those familiar with VCRs blinking 12:00. One particular challenge involves a te ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

What is the best way to display the counter result on the cards at the top of an html webpage?

My latest project involves a comparison script using Groovyscript to analyze two distinct files. Embedded within the Groovyscript is HTML code that utilizes CSS and potentially Bootstrap of any version. I have successfully implemented counters with a titl ...

htmlcssbootstrap-4

Position the Navbar above the Logo and ensure it stays in place when resized

How can I position the navbar over the logo so that it aligns perfectly under the letter "g"? I want to ensure that this positioning remains consistent even when resizing the browser or viewing on different screen sizes, without impacting the content belo ...

htmlcss

Tips on relocating the input position to the top

Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...

htmlcss

Implement a CSS design for the flash notification

My application is built with Sinatra. I have implemented the sinatra-flash gem to display flash messages if the user fails to select enough items for comparison. While this functionality is working fine, I am having difficulty customizing the styling of th ...

htmlcssrubysinatraerb

Utilizing jQuery to assign a value to a SPAN tag

In my code, there is an element with the following syntax: <span id="userName.errors" class="errors">Enter Your User Name </span>. I am interested in utilizing jQuery to delete either the text 'Enter Your User Name' or any element tha ...

jqueryhtmlspring

Determine if the HTML Application Cache is void

Our website uses a "manifest.appcache" file to manage the application cache. Some pages are designed to be accessed offline, so they have references in the html tag to the manifest, while others do not. Is there a way to determine if the cache is empty ac ...

htmlcachingmanifest