What is the best way to ensure that all buttons remain fixed at the bottom of the div?

I am facing a challenge with 4 buttons in 4 different cards that have varying text sizes. I need to ensure that the buttons stay at the bottom regardless of the amount of text I input in the cards.

<div class="pricing-block">
 <div class="pricing-cards">
   <b class="pricing-tittle">Unlimited</b>
   <p class="pricing-description">79$</p>
   <p class="pricing-features">Feature 1</p>
   <p class="pricing-features">Feature 2</p>
   <p class="pricing-features">Feature 3</p>
   <p class="pricing-features">Feature 4</p>
   <p class="pricing-features">Feature 5</p>
  <button type="button" class="pricing-button">Purchase</button>
 </div>
</div>

.pricing-block{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
htmlcss

Answer №1

Separate the variable content and button elements into two different divs, then utilize flex-grow to expand the variable content. To ensure uniform height for all cards, set a fixed height on the parent element.

.pricing-block{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}


.pricing-card {
  height: 300px;
  display: flex;
  flex-direction: column;
  border: solid 1px #d4d4d4;
  padding: 8px;
 }
 
 .pricing-card-header {
    flex-shrink:0;
    border-bottom: solid 1px #d4d4d4;
 }
 .pricing-card-body {
    flex-grow: 1;
 }
 
  .pricing-card-footer {
    flex-shrink:0;
      padding: 8px;
    border-top: solid 1px #d4d4d4;
 }
<div class="pricing-block">
 <div class="pricing-card">
    <div class="pricing-card-header">
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79$</p>
   </div>
   <div class="pricing-card-body">
     <p class="pricing-features">Feature 1</p>
     <p class="pricing-features">Feature 2</p>
     <p class="pricing-features">Feature 3</p>
     <p class="pricing-features">Feature 4</p>
     <p class="pricing-features">Feature 5</p>
   </div>
   <div class="pricing-card-footer">
     <button type="button" class="pricing-button">Purchase</button>
   </div>
 </div>
 
 
  <div class="pricing-card">
    <div class="pricing-card-header">
     
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79$</p>
   </div>
   <div class="pricing-card-body">

     <p class="pricing-features">Feature 1</p>
     <p class="pricing-features">Feature 2</p>
   </div>
   <div class="pricing-card-footer">
     <button type="button" class="pricing-button">Purchase</button>
   </div>
 </div>
 
 
   <div class="pricing-card">
    <div class="pricing-card-header">
     
      <p class="pricing-description"> <b class="pricing-tittle">Unlimited</b> 79$</p>
   </div>
   <div class="pricing-card-body">

     <p class="pricing-features">Feature 1</p>
     <p class="pricing-features">Feature 2</p>
     <p class="pricing-features">Feature 3</p>
     <p class="pricing-features">Feature 4</p>
   </div>
   <div class="pricing-card-footer">
     <button type="button" class="pricing-button">Purchase</button>
   </div>
 </div>
</div>

Answer №2

If you wrap your pricing information in a div and use flex-grow: 1, you can ensure that the buttons will always remain at the bottom of the content.

.pricing-block{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}

.pricing-cards {
  display: flex;
  flex-direction: column;
}

.pricing-cards-content {
  flex-grow: 1;
}
<div class="pricing-block">
  <div class="pricing-cards">
    <div class="pricing-cards-content">
      <b class="pricing-tittle">Unlimited</b>
      <p class="pricing-description">79$</p>
      <p class="pricing-features">Feature 1</p>
      <p class="pricing-features">Feature 2</p>
      <p class="pricing-features">Feature 3</p>
    </div>
    <button type="button" class="pricing-button">Purchase</button>
  </div>
  <div class="pricing-cards">
    <div class="pricing-cards-content">
      <b class="pricing-tittle">Unlimited</b>
      <p class="pricing-description">79$</p>
      <p class="pricing-features">Feature 1</p>
      <p class="pricing-features">Feature 2</p>
    </div>
    <button type="button" class="pricing-button">Purchase</button>
  </div>
</div>

Answer №3

Hopefully this solution works for you!

For more details and a live example, you can visit this codepen link 

.container {
  position: relative;
  padding: 30px;
  display: flex;
}
.pricing-block{
display: flex;
flex-direction: row;
}
.pricing-button { display: flex; }
.pricing-cards { margin-left: 20px; }
<div class="container">
<div class="pricing-block">
 <div class="pricing-cards">
   <b class="pricing-title">Unlimited</b>
   <p class="pricing-description">$79</p>
   <p class="pricing-features">Feature 1</p>
   <p class="pricing-features">Feature 2</p>
   <p class="pricing-features">Feature 3</p>
   <p class="pricing-features">Feature 4</p>
   <p class="pricing-features">Feature 5</p>
  <button type="button" class="pricing-button">Purchase</button>
 </div><!-- First Card -->
  <div class="pricing-cards">
   <b class="pricing-title">Unlimited</b>
   <p class="pricing-description">$79</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>
  <button type="button" class="pricing-button">Purchase</button>
 </div><!-- Second Card -->
  <div class="pricing-cards">
   <b class="pricing-title">Unlimited</b>
   <p class="pricing-description">$79</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
  <button type="button" class="pricing-button">Purchase</button>
 </div><!-- Third Card -->
  
  <div class="pricing-cards">
   <b class="pricing-title">Unlimited</b>
   <p class="pricing-description">$79</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
   <p class="pricing-features">Lorem ipsum dolor sit amet, consectetur</p>
  <button type="button" class="pricing-button">Purchase</button>
 </div><!-- Fourth Card -->
</div>

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

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...

htmlcss

Arrangement of tables using HTML and CSS on the outdoor patio

Looking for advice on how to align buttons in the last column of a table outside of the table but in the same row. The attached image shows the current layout: https://i.sstatic.net/Ex5AR.png ...

htmlcssbootstrap-4html-table

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

javascriptjqueryhtmlcssinline

Generating divs dynamically with inline styling and utilizing ngFor, while incorporating a conditional check with ngIf in Angular

Currently, I have an Angular component where I am dynamically generating div elements using the ngFor directive. However, I also need to validate a condition before creating each div, and I'm facing challenges when trying to use both ngFor and ngIf in ...

htmlcssangular

Tips for highlighting the final word in the headline using an underline

I'm attempting to create a title style similar to what is shown below https://i.sstatic.net/Qao4g.png The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking ...

htmlcssbootstrap-4

I am having trouble properly positioning an icon next to its corresponding text within a menu item

I'm a newcomer to the world of HTML5 + CSS3 and I'm having trouble with aligning menus, text, and icons within the menu. Here's the issue: Each line of the menu consists of an icon and a text description. The problem is that they are too clo ...

htmlcssweb

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

Customizing vertical padding in Bootstrap 4 Tables: Adjusting the spacing between rows

<div class="table-wrapper"> TABLE STUFF </div> I'm using Bootstrap to create a table with no borders, but I'm finding that the rows have too much vertical padding. How can I adjust the padding to create a more compact design? ...

htmlcssbootstrap-4

What is causing lxml to not remove section tags?

Having some trouble parsing HTML using lxml and Python. My goal is to eliminate section tags, but seems like lxml can remove other specified tags except for sections. For instance: test_html = '<section> <header> Test header </header& ...

pythonhtmllxml

Conceal a div until reaching the end of the webpage by scrolling

Currently, I am working on a web page inspired by music release pages (check out an example here). My goal is to have certain hidden divs at the bottom of the page only reveal themselves once the user has scrolled all the way down, with a delay of a few se ...

javascriptjqueryhtmlscrollhide

Steps for Loading HTML5 Video Element in Ionic 2

Struggling to showcase a list of videos from my server, here's the issue I'm encountering and the layout of the app. https://i.stack.imgur.com/HWVt3.png This is the code snippet in HTML: <ion-list> <button ion-item *ngFor="let v ...

htmlangularcssionic2ionic3

Tips for maintaining row position while zooming your browser above 100% with Bootstrap

I am experiencing a small issue with the bootstrap grid system. I have set up a row with two sections using col-md-6. However, when I zoom in my browser to over 100%, the Close label and input move to the next line. I want them to stay in the same place re ...

htmltwitter-bootstrap

determining CSS selector

Having trouble identifying a locator using CSS. There are 10 elements with the same locator name on the webpage. Each web element has the same XPath value: //div[@class='thumb_image'] The web element list size is 10. If I want to access the 5t ...

cssselenium

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly ap ...

javascripthtmlcsstransform

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

htmlcssimagebuttontextbox

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...

csstwitter-bootstrap-3

What is the best way to add an ellipsis to the conclusion of a paragraph using .dotdotdot?

I'm struggling with implementing the ellipsis function on my website. My goal is to have the ellipsis appear at the end of each paragraph in the news_inner div (morgan, pia, and gold). I found the function on , but I'm having difficulty understan ...

jquerycss