Position a button to be aligned with the bottom of its container

My goal is to have the button positioned at the bottom of the red div, nested inside it.

 .grand-parent {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 300px;
        background-color: green;
    }

    .parent {
        margin: 12.5px;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(50% - 25px);
        height: 200px;
        background-color: red;
    }

    .table {
        box-sizing: inherit;
        display: table;
        border-collapse: separate;
        border-spacing: 2px;
        border-color: grey;
    }


    .button {
        box-sizing: border-box;
        border-radius: 2px;
        font-size: 12px;
        line-height: 12px;
        text-align: center;
        align-items: center;
        margin: 10px 0;
        
    }
<div class="grand-parent">
 <div class="parent">
  <table class="table">
  </table>
  <button class="button">CLICK</button>
 </div>
</div>

I am struggling to figure out how to position this button at the bottom of its container (parent in this case), as it keeps appearing right below the table.

I have experimented with various properties like justify-content, justify-items, align-self, and more, but haven't found the correct combination yet.

htmlcssflexbox

Answer №1

Adjust the .parent element to have a CSS property of display: flex;, and then utilize justify-content: space-between to position the button at the bottom of the element.

.grand-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 300px;
  background-color: green;
}

.parent {
  margin: 12.5px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: calc(50% - 25px);
  height: 200px;
  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start; /* Ensure button is not full width */
}

.table {
  box-sizing: inherit;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}

.button {
  box-sizing: border-box;
  border-radius: 2px;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  align-items: center;
  margin: 10px 0;
}
<div class="grand-parent">
  <div class="parent">
    <table class="table">
      <tr>
        <td>Table</td>
      </tr>
    </table>
    <button class="button">CLICK</button>
  </div>
</div>

Answer №2

Make the following adjustment in the .grand-parent css: 

remove: display: flex;
flex-direction: row;
flex-wrap: wrap;

.grand-parent {
        
        height: 300px;
        background-color: green;

    }

    .parent {
        margin: 12.5px;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(50% - 25px);
        height: 200px;
        background-color: red;
    }

    .table {
        box-sizing: inherit;
        display: table;
        border-collapse: separate;
        border-spacing: 2px;
        border-color: grey;
    }


    .button {
        box-sizing: border-box;
        border-radius: 2px;
        font-size: 12px;
        text-align: center;
        margin: 10px 0;
        
        
    }
<div class="grand-parent">
 <div class="parent">
  <table class="table">
  
  </table>
 </div>
 <div>
 <button class="button">CLICK</button>
 </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

Understanding image sizes for uploads on Tumblr can be a bit confusing, especially when comparing pages to posts. Learn how to implement lazyloading for post

I'm currently working on a highly customized Tumblr account that features a mix of pages and posts. I am looking to access content and assets, particularly images, from these pages/posts for use in other parts of the site. When I upload an image to a ...

javascripthtmllazy-loadingtumblrtumblr-themes

Issues with the styling of a CSS webpage within an AJAX application

I'm encountering an issue with my CSS style that works fine on a static HTML page. The problem arises when content is dynamically loaded into layer3 and then into layer 2. I'm struggling to understand the consistency as sometimes the layers are ...

htmlcssajax

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

javascriptjqueryhtmlcssbootstrap-modal

The process of redirecting a web page using htaccess and incorporating URL parameters

I have a directory where I store HTML pages. Using the PHP include function, I am adding these pages to my index.php file by referencing them with a URL parameter value. The URL parameter "xpage" corresponds to the page names stored in another folder, whil ...

phphtml.htaccess

I am having trouble with the Primeng password template suggestions not appearing as expected

The demonstration available at this link is not functioning correctly, unlike the example provided in the documentation at this website. In the StackBlitz demo, the suggestions are not being displayed as expected for the password template. Take a look at ...

htmlangulartypescriptprimeng

The content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

I'm having trouble pinpointing the issue in my code

For some reason, the first button in the div in this code is not working on HTML files. I have tried multiple JavaScript and HTML validators but none of them seem to work. Surprisingly, it works fine on codecademy.com and w3schools.com, but the issue persi ...

javascripthtml

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...

cssgoogle-maps-api-3

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

Does setting white-space:nowrap enlarge the div?

My CSS code for div .name sets the width to 75% to truncate text if it doesn't fit. However, resizing the window causes the text to remain the same size and my entire website structure falls apart. This is the HTML code snippet: <tr> <t ...

htmlcss

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap

The customer's status cannot be determined

I've encountered an issue with my TypeScript code that includes a simple if-else logic. endDate: String = ''; customerStatus: String; this.endDate = this.sampleData.customerStartDate; if (this.endDate == null) { this.customerStatus = ' ...

htmlangulartypescript

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

htmlcssbootstrap-5font-sizecss-specificity

Working with JQuery to extract and append data stored in a JSON object

I am working with the following JSON data: [ { "MOD_AXL": 0, "MOD_CDS_ID": 110000168, "MOD_CV": 0, "MOD_CV_CTM": null, "MOD_ID": 168, "MOD_MFA_ID": 514, "MOD_PC": 1, "MOD_PCON_END": 199007, "MOD_PCON_START": 196303, ...

jqueryhtmlruby-on-railsjson

I found myself pondering over possible solutions to rectify this parse error

I need help resolving an issue with parsing. Here is the link to the error image: https://i.stack.imgur.com/jKQat.jpg. Additionally, my HTML code connecting to the CSS site can be found here: https://i.stack.imgur.com/ST31r.jpg. The website I linked in t ...

htmlcss

Issue displaying content in a two-column setup on Chrome and Mozilla browsers due to ASP problem

I've encountered an issue with a footer appearing incorrectly in Chrome and Mozilla browsers when using a 2-column layout, although it displays fine in IE8. Currently, I'm coding in asp with css includes to render the footer. Here's the CSS ...

htmlcss

Reactively responsive table view

I am new to CSS and recently discovered a responsive table on this website that I would like to incorporate into my application. My challenge is figuring out how to switch the table layout from left to right (headers on the right and values on the left) w ...

cssresponsive-designright-to-left

Show the particular entry to be viewed upon clicking the link provided in the email

How can I create a link in an email that, when clicked, displays data for a single record? Currently, I have a datatable on the index page that shows all records when the app is opened. When a change is made to a record, an email is sent out with the ID o ...

c#htmlmodel-view-controller

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

javascriptjqueryhtml