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

Show Struts2 error message on an HTML webpage

I have included error and message handling in my Struts2 action class using the addActionMessage and addActionError methods. I am now looking for code that will allow me to display these messages and errors on the HTML page. Is it feasible to do so? ...

htmlcssjspmodel-view-controllerstruts2

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Populate HTML form with return values using jQuery AJAX

I am struggling with retrieving values from jQuery/AJAX and displaying them in an HTML form within the index.php file. This is what my index.php looks like: <script type="text/javascript"> $(document).ready(function () { $('#display'). ...

javascriptphpjqueryhtmlajax

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

javascripthtmlnode.jsangularjsangular-bootstrap

Dynamically align text in the center of an image, vertically

I'm trying to create a hover effect where an image and text are displayed in the center of the image when someone hovers over it. Here is how the HTML looks: <article> <div class="entry-content"> <a href="http://www.linktopost.com"> ...

htmlcss

Place elements in a grid layout using CSS (and also ensure they are centered)

My goal is to create a data-grid (table layout) where the elements have fixed sizes. These elements should be placed in the same line until they can't fit anymore, then move to the next line. I have tried using inline-blocks for this, but I'm st ...

htmlcss

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

htmlcssreactjsmaterial-design

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

Leveraging Javascript within MVC3, either on a master page or child page

I'm currently developing a web application utilizing MVC3 and I am curious about the best practices for incorporating JavaScript. Specifically, I am uncertain about whether to include JavaScript in the master page as well as in individual child pages. ...

javascripthtmlasp.net-mvc-3

Is there a way in JavaScript or jQuery to display text from an array and switch to the next piece of text in the array with the click of a button?

I currently have an array containing 13 items, all of which are text. To display the text from the array, I am using: document.write(arrayname["0"]); However, I would like to implement a functionality where users can click a button to fade out the curren ...

javascriptjqueryhtml

The alignment of CSS boxes at the top is off

My challenge is to stack 3 containers horizontally, but they have different heights and the smaller ones end up at the bottom. How can I resolve this issue? This is the code snippet I am currently using for the boxes: .brand{ border: 1px solid black; bor ...

css

Getting the draggable events area from the database in fullCalendar: A step-by-step guide

Currently, I am in the process of developing fullCalendar drag-and-drop events with a resource column. Initially, I hardcoded the draggable events area and now I am working on retrieving it from the database. Previously, the database had two tables - Resou ...

phphtmlfullcalendarfullcalendar-4

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

cssangularangular-material

How to customize the colors of imported images in next.js

In my next.js app, I designed a unique icon and uploaded it as an SVG file. Now, I am looking to add a feature that allows users to personalize the color of this icon by choosing from options like red, yellow, black, etc. However, since the image is static ...

cssreactjssvgnext.jsnext-images

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

csshtmlmodernizr

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

htmlcss

ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...

htmlcssreactjsbootstrap-4reactstrap

Tips for creating distinct hover descriptions for each element in an array

My dilemma may not be fully captured by the title I've chosen, but essentially, I am working with a list of names and I want each one to display a unique description when hovered over with a mouse. On the surface, this seems like a simple task, right ...

javascripthtmljquerycss

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

What is the best way to organize table rows into a single column when the window is resized?

I am working on a table that has three pictures in a row, with 100% width. I want the table to be responsive and stack the pictures into one column when the space is limited. The issue I am currently facing is that the elements of the table do not stack i ...

htmlcsstwitter-bootstrapresponsive-design