Aligning a button at the bottom within a flex container

Looking to present a flex grid with options for users, ensuring boxes have equal height for consistent button positioning at the bottom. Check out the code snippet below:

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*In order to center buttons within DIV and position them 15px up from the bottom, don't set height*/
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and (max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: block;
  width: 100%;
  position: relative;
}
...

Trying to align all buttons at the same height across containers without setting a fixed height. See the updated snippet below for reference:

.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}
...
...

If buttons are floating over content due to lack of fixed container height, aim to align them by positioning at the bottom with a slight float using margins. View the current vs desired outcome here.

htmlcssflexbox

Answer №1

flex method.

Include 

display: flex; flex-direction: column;
in 
.site-membership-breakdown-module-inner

and

flex: 1; within 

.site-membership-breakdown-paragraph-text

By doing this, the center content will expand and adapt to fill any empty space.

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*I don't want to set a height because the buttons need to fit within the DIV and be centered 15px up from the bottom*/
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #ffffff;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and (max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px;
    display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #ffffff;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: flex;
  width: 100%;
  /* position: relative; */
  flex-direction: column;
}

.site-membership-breakdown-paragraph-text {
  flex: 1;
}
<div class="site-membership-breakdown">
  <div class="site-membership-breakdown-module">
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">
        Plan 1
      </p>
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">
        • Thing 1.<br />• Thing 2.<br />• Thing 3.
      </p>

      <button
        class="site-join-button"
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'"
      >
        <p class="site-landing-button-text w700">Join 1</p>
      </button>
    </div>
  </div>

  <div class="site-membership-breakdown-module">
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">
        Plan 2
      </p>
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">
        • Thing 1.<br />• Thing 2.<br />• Thing 3.<br />• Thing 4.
      </p>

      <button
        class="site-join-button"
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'"
      >
        <p class="site-landing-button-text w700">Join 2</p>
      </button>
    </div>
  </div>

  <div class="site-membership-breakdown-module">
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">
        Plan 3
      </p>
      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">
        • Thing 1.<br />• Thing 2.<br />• Thing 3.<br />• Thing 4.<br />•
        Thing 5.
      </p>

      <button
        class="site-join-button"
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'"
      >
        <p class="site-landing-button-text w700">Join 3</p>
      </button>
    </div>
  </div>

  <div class="site-membership-breakdown-module">
    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">
        Plan 4
      </p>

      <!-- <br /> -->
      <p class="site-membership-breakdown-paragraph-text center black w700">
        Some info about the biggest of the plans, this one has the most
        information as a paragraph to show what is available within the
        plan.
      </p>

      <button
        class="site-join-button"
        onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'"
      >
        <p class="site-landing-button-text w700">Free Trial</p>
      </button>
    </div>
  </div>
</div>

Answer №2

To ensure proper alignment and spacing for the button within a container, you need to include the following CSS properties: transform: translateX(-50%), left: 50%;, and padding-bottom: 65px (60px for the button's height and 5px for space below the container).

.site-membership-breakdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top: 15px;
}

.site-membership-breakdown-module {
  width: 20%;
  /*I don't want to set a height because the buttons need to fit within the DIV and be centered 15px up from the bottom*/
  display: flex;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border-radius: 0;
  border: 10px solid #000000;
  padding: 10px;
}

@media only screen and (max-width: 500px) {
  .site-membership-breakdown-module {
    width: 100%;
    height: 250px display: flex;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 0;
    border: 10px solid #000000;
    padding: 10px;
  }
}

.site-membership-breakdown-module-inner {
  display: block;
  width: 100%;
  position: relative;
  padding-bottom: 65px;
}

.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 500px) {
.site-join-button {
    height: 60px;
    width: 120px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #FFFFFF; 
    background-color: #000000; 
    border: 5px solid #000000;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}
}

.site-join-button:hover {
    color: #000000;
    background-color: #FFFFFF;
}
<div class="site-membership-breakdown">

  <div class="site-membership-breakdown-module">

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">Plan 1</p>
      <br>
      <p class="site-membership-breakdown-paragraph-text center black w700">• Thing 1.<br>• Thing 2.<br>• Thing 3.</p>


      <button class="site-join-button" onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700">Join 1</p>
            </button>
    </div>


  </div>


  <div class="site-membership-breakdown-module">

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">Plan 2</p>
      <br>
      <p class="site-membership-breakdown-paragraph-text center black w700">• Thing 1.<br>• Thing 2.<br>• Thing 3.<br>• Thing 4.</p>

      <button class="site-join-button" onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700">Join 2</p>
            </button>
    </div>


  </div>

  <div class="site-membership-breakdown-module">

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">Plan 3</p>
      <br>
      <p class="site-membership-breakdown-paragraph-text center black w700">• Thing 1.<br>• Thing 2.<br>• Thing 3.<br>• Thing 4.<br>• Thing 5.</p>

      <button class="site-join-button" onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700">Join 3</p>
            </button>
    </div>


  </div>

  <div class="site-membership-breakdown-module">

    <div class="site-membership-breakdown-module-inner">
      <p class="site-membership-breakdown-title-text center black w700">Plan 4</p>

      <br>
      <p class="site-membership-breakdown-paragraph-text center black w700">Some info about the biggest of the plans, this one has the most information as a paragraph to show what is available within the plan.</p>

      <button class="site-join-button" onclick="if (!window.__cfRLUnblockHandlers) return false; location.href='/join'">
               <p class="site-landing-button-text w700">Free Trial</p>
            </button>

    </div>


  </div>


</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

Running a Node.js child process upon clicking an HTML button

I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...

htmlnode.jsreactjs

What could be the reason for my clickable div not functioning as a link in this particular code?

Here is my jQuery script: $('.projektet').click(function(){ var url = $(this).find("a").attr("href"); window.location = url; }); <div class='projektet'> <h3>".$alias." ".$expertis." ".$other."</h3> & ...

jqueryhtml

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

I am currently seeking a way to validate if a variable corresponds to the choice made in the dropdown menu. Any suggestions on how to accomplish this task?

I have put together a simple drop down menu. My goal is to grab the currently selected value from the drop down list, store it in a variable, and display it in the console. The ultimate objective is to compare that variable with another one to determine if ...

javascriptjqueryhtmldom

What are some creative ways to animate a highlight effect on a CSS

I'm struggling to implement a sliding underline effect for my top navigation bar on hover. I've tried using transitions and keyframes, but so far it's not working as expected. My current attempt only triggers the effect on the parent elemen ...

htmlcssanimationcss-animationsnavbar

Error encountered at /: Parsing error found for 'product.tk' in 'main-product-detail'product.tk'

I've encountered a persistent issue while trying to add links in my home.html files for the product detail page. An error keeps popping up: TemplateSyntaxError at / Unable to parse remaining: 'product.tk' of ''main-product-detail&a ...

pythonhtmldjango

Implementing a consistent CSS structure for various media sizes

Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others. Is there a way to achieve this witho ...

cssresponsive-designcss-gridgrid-layout

Analyzing div tags using Nokogiri

There's a piece of code that effectively extracts tid and term data: (answered generously by Uri Agassi) for i in (1..10) doc = Nokogiri::HTML(open("http://somewebsite.com/#{i}/")) tids = doc.xpath("//div[contains(concat(' ', @class, ...

htmlruby-on-railsrubyxpathnokogiri

How can you use HTML and SVG to move just one endpoint of a line using a mouse click?

I have been exploring ways to selectively move one end of a line, but I am encountering difficulties as it keeps altering the container and ultimately redrawing the entire line. Here is a JSFiddle link for reference: https://jsfiddle.net/h2nwygu8/1/ < ...

javascriptcsshtml

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

htmlcssangulartypescript

"Utilizing a background image within an email using a table data cell (

Struggling to add a background image quickly for a cell within a table in order to showcase dynamic text on top of it I attempted : <td style="background-image:url('bla... But it's not working as expected. What would be the most effective m ...

htmlcssgmail

Error message in PHP involving the require_once function

I'm currently using CODA and MAMP while working locally from my HTdocs folder. I've been delving into PHP and MVC structure, but encountering an issue with require_once. Despite trying various solutions found in other posts, none seem to work for ...

phphtmlcoda

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

jquerycsshoveraddclass

Add a JSON file containing an image path as a value into a CSS background property

I currently have a MongoDB database containing documents with 'img' values structured as follows: "img": "../folder/img.jpg" Would it be feasible to utilize this string in my CSS for modifying the background image? This is essential because I n ...

javascriptcssjsonmongodb

JavaScript opacity adjustments not achieving desired outcome

My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm u ...

javascripthtmlcss

Utilize flexbox for text wrapping while preserving the proportionate column width for varying text lengths

I'm currently working on a Wordpress site, incorporating flexbox into my design. I have set up two columns where child 1 should occupy 75% of the page width and child 2 should take up 25%. However, I've noticed that when the content in child 1 is ...

cssflexboxword-wrap

How can one efficiently manage a large number of images on a website in a clever way?

I have a straightforward webpage with a large number of images. Just like this... <img src="img/photo00001.jpg"> <img src="img/photo00002.jpg"> <img src="img/photo00003.jpg"> ... and so forth I don't want to waste hours copying and ...

javascripthtmlcsscontent-management-system

The merging of several XSL files

Hey there, I have two separate xsl files and an xml file. Is there a way to merge these xsl files into one transform type to create a single HTML output? The first xsl file is called index.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCT ...

htmlxmlxsltxslt-1.0