Ensure that div elements have consistent heights using flexbox properties

I’m trying to get my blocks to display inline and have a consistent height regardless of the amount of text inside them. I’ve got them lined up next to each other, but I can’t figure out how to make sure they all have the same height.

Here's the HTML structure:

<div class="article_block">
   <div class="article_block_content">
       <div class="article_block_content_left">
          <img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
        </div>

        <div class="article_block_content_right">
          <h5 class="article-tag"><%= category.name %></h5>
          <h2 class="article-title"><%= headline %></h2>
          <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
        </div>
    </div>
</div>

And here's the CSS styling:

.article_block {
    width: 33%;
    display: inline-flex;

    .article_block_content{
      margin: 10px;
      height: inherit;

      .article_block_content_left {

      }
      .article_block_content_right {
        padding: 20px;

        .article-tag {
          text-align: center;
          color: #7d8a8f;
          text-transform: capitalize;
          font-size: 14px;
          font-family: 'Open Sans';
          padding-top: 15px;
        }
        .article-title {
          text-align: center;
          font-family: 'Merriweather';
          color: #333;
        }
        .article-subtitle {
          text-align: center;
          font-family: 'Merriweather';
          font-style: italic;
          color: #464849
        }
      }
    }
  }

Check out what’s currently happening in the screenshot below: https://i.sstatic.net/WePM7.png

Answer №1

If you want the three .article-block divs to have uniform height, simply add display: flex to their parent container. This will ensure consistent heights for the divs as the default value of align-items is set to stretch.

* { box-sizing: border-box; }

.article-block-wrap {
  display: flex;
  margin: 0 -10px;
}

.article_block {
    padding: 5px;
    display: flex;
    flex: 0 0 33.333%;
    overflow: hidden;
}

.article_block_content{
    background: rgba(0,0,0,0.2);
}

.article_block_content_left {
    text-align: center;
}

.article_block_content_right {
  padding: 20px;
}

.article-tag {
  text-align: center;
  color: #7d8a8f;
  text-transform: capitalize;
  font-size: 14px;
  font-family: 'Open Sans';
  padding-top: 15px;
}

.article-title {
  text-align: center;
  font-family: 'Merriweather';
  color: #333;
}

.article-subtitle {
  text-align: center;
  font-family: 'Merriweather';
  font-style: italic;
  color: #464849
}
<div class="article-block-wrap">

  <div class="article_block">
     <div class="article_block_content">
         [...]
          </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         [...]
           </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         [...]
          </div>
      </div>
  </div>
     
</div><!-- .article-block-wrap -->

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

Troubleshooting problem with Z-Index conflict in Flash animation

I am facing an issue with two HTML divs - one containing a flash movie and the other simple text. I want to place the textual div on top of the flash movie div, but no matter how I set their positions in CSS or adjust their Z-Index values, the text keeps ...

Submitting a form and then redirecting to a PHP page

I have a dynamic form and I am currently using jQuery to submit it. Here is the code I have been using: $('#formsite').on('submit', function (e) { //prevent the default submithandling e.preventDefault(); //send the data of ' ...

Responsive Bootstrap dropdown menu adjusts its size when clicked

I'm currently in the process of creating a basic navbar that includes a drop-down menu on the far right side, as depicted here: https://i.sstatic.net/hs9us.png The issue I'm facing is that when I click on the dropdown, the navbar automatically ...

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

Sharing data with external domains and retrieving HTML output using JavaScript

When a browser sends a POST request and expects an HTML page result from JavaScript, problems arise if there is no Access-Control-Allow-Origin in the server response. Unfortunately, changing anything on the server side is not an option. If a human clicks ...

Tips on retrieving the text content of an HTML element using its tag

Is there a way to retrieve the selected text along with its HTML tags using window.getSelection()? When using window.getSelection(), it only returns plain text such as HELLO. However, I need the text with the HTML tag included, like this <b>Hello< ...

Encountering persistent issues while attempting to integrate socket.io into my Node.js application with Express

Recently, I've been exploring ways to create a textbox that allows multiple users to type simultaneously. Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...

I'm looking for a more efficient and graceful way to implement jquery .slideToggle on numerous hidden divs. Any suggestions?

If you would like to see a demonstration of what I am working on, here is a link to a live example: https://jsfiddle.net/yfe7ky3x/ My goal is to create a basic portfolio website that showcases various projects. I want to implement a feature where clicking ...

I am looking to identify when the focus event occurs on all HTML input elements on a page without using addEventListener or any HTML attributes

Does anyone know a way to detect the focus event on all HTML input elements on a page without using the addEventListener function or HTML attributes? I was successful in detecting click events with the following code: onclick = () => { // do somethi ...

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

Is there a way to incorporate CSS into a JPG file on the server end?

I have some JPGs that need to undergo CSS operations on the server side, such as cropping and rounding corners. Once processed, I want to serve these edited JPGs to clients. The clients themselves are unable to interpret CSS, they can only display JPGs. I ...

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

Vuetify's v-badge showcasing an exceptionally large number in style

Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge. Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-ta ...

Refine your search by name following the implementation of a character-altering filter

Encountered a scenario in which there is a need to filter elements generated by the 'ng-repeat' directive. I have implemented a custom filter that replaces one character with another and vice versa for each element created. However, when attempt ...

Switching between two states of a single 'td' element within a column

I am trying to implement a feature where only specific elements in the fourth column of a four-column table toggle when clicked. For example, clicking on an element in the fifth row third column should toggle the corresponding element in the fifth row four ...

Preserving data and retrieving it

I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...

The paragraph tag closes automatically once opened

In the process of establishing a news section on my website, I encountered an issue while using the following code: <p id="news-container"> <h1> . . . </h1> <strong>big</strong> . . . </p> Upon inspecting, it appea ...

Enhance the appearance of Font Awesome stars by incorporating a hover effect

Is there a straightforward way to make them turn solid yellow when you hover over them? const styles = theme => ({ root: { flexGrow: 1, overflow: 'hidden', padding: theme.spacing(0, 3), }, paper: { maxWidth: 800, mar ...

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...