Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 100px;
}

.card {
  width: 325px;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
}
<div class="card-container">
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. urus in
        massa tempor nec feugiat nisl pretium fusce id.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 2 and it is longer</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>

htmlcssflexbox

Answer №1

This solution should solve the issue:

Expand the snippet and run the code to view on a wider screen

 * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
      font-family: sans-serif;
    }

    body {
      background-color: #f0f0f0;
    }

    .card-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 100px;
      align-items: stretch; 
    }

    .card {
      display: flex; 
      flex-direction: column; 
      width: 325px;
      background-color: #f0f0f0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      margin: 20px;
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      padding: 16px;
      height: 100%; 
    }

    .card-content h3 {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .card-content p {
      color: #666;
      font-size: 15px;
      line-height: 1.3;
    }

    .card-content .btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #333;
      text-decoration: none;
      border-radius: 4px;
      color: #fff;
    }
<body>
  <div class="card-container">
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. Curus in massa tempor nec feugiat nisl pretium fusce id.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 2 which is longer</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
  </div>
</body>

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

What is the best way to evenly divide divs vertically on a Bootstrap website?

I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...

csstwitter-bootstrapresponsive-design

Real-time preview of a text field in JavaScript

I'm attempting to create a similar piece of code like the one at the bottom of this page for leaving comments. I have the basic code, but the result doesn't display new lines (or HTML, although that's not essential). I have the function belo ...

javascripthtmltextarea

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

javascripthtml

Tips for saving input data from an HTML page to a text file

How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...

htmlcss

Styling Tables with Bootstrap CSS and Integrating Database Data

Currently, I am utilizing the code snippet below to retrieve and display data stored in a database. Although everything functions correctly, I am encountering an issue with displaying it using Bootstrap CSS. Strangely, when I try copying an example of a ta ...

htmlcsstwitter-bootstrap

Implementing a stylish gradient background with HTML 5 progress bar tag

I am trying to customize an HTML5 progress bar tag in a unique way: The background of the bar should have a gradient with a fixed width of 100%, but I want the gradient to only be visible where the value of the bar is... progress[value]::-webkit-progres ...

csshtmlstylesprogress-barlinear-gradients

Select from a variety of backgrounds using the dropdown menu on the site

I seem to be struggling with javascript and php, but I know that in order to make this function properly, I need to utilize both languages. My goal is to set up a "select box" featuring 4 different images. There will be a default image displayed, but user ...

javascriptphpjqueryhtml

Using PHP to display dynamic data and add it to an HTML element

I have a unique situation where I am storing html elements, specifically <rect> svg elements, as strings in a database. In my PHP code, I retrieve and echo this data: $db = getConnection(); $statement = $db->prepare('SELECT `copy` FROM `dra ...

phpjqueryhtmlajaxsvg

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

javascriptphpjquerycsswordpress

The DIV is only partially concealed by the box shadow

I'm having an issue with the Box Shadow css style I've applied. It seems to only cover a small portion at the top of the mainContent DIV, leaving the rest without any shadow. Can anyone help me figure out what I might be doing wrong? .mainConten ...

css

Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 ...

htmlcssalignment

Maintain Angular Dropdown Menu Open Across Page Refresh

I am currently working on an HTML/Typescript view that is connected to a SQL Database. Whenever there are changes made to the database, the entire webpage reloads. The issue we are facing is that we have dropdown menus on the page that clients want to rema ...

javascripthtmlsqlangulartypescript

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

How to automatically scroll to the bottom using jquery/css

I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can ...

javascriptjquerycss

Select a color by inputting the type as "color" while leaving a space between the border and

I'm having an issue with the color input There seems to be a gap between the black border and the actual color, but I want to get rid of it #color-picker { border: 5px solid black; border-radius: 5px; width: 207px; height: 60px; padding: ...

htmlcsspadding

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

prismjs plugin for highlighting code displays code in a horizontal format

If you're looking for a way to showcase source code on your website with highlighted syntax, prismjs.com may be just what you need. It offers a similar style to monokai... However, I've encountered an issue where the plugin displays my code in a ...

javascripthtmlcsstinymcecode-hinting

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

javascripthtmljquerycssdom

Leveraging HTML5 as a standalone application with Deskshell integration for seamless connectivity to MySQL

Currently working on a compact HTML5 application with deskshell. I am seeking a way to connect JavaScript directly to a MySQL database without relying on PHP or any server-side language. Any suggestions? ...

mysqlhtmlnode.jsappjs

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

javascripthtmlcss