Is there a way to attach HTML buttons to the bottom of their respective cards?

Question

Is there a way to attach HTML buttons to the bottom of their respective cards?

I am currently in the process of creating a directory website. To build it, I chose the Jekyll Moonwalk theme as a solid foundation and am customizing it heavily to suit my requirements.

Since this is my inaugural website project, I'm learning as I progress. At this moment, I'm focused on ensuring that my HTML button elements "stick" to the bottom of their respective containers, aligning perfectly in a row rather than appearing at the bottom of the text content. Here is a preview of the current state:

Image

The red line indicates approximately where I envision the bottom of all the buttons should be.

Although I attempted ChatGPT's suggestion, it unfortunately did not yield the desired outcome.

<div style="position: relative;">
  <button style="position: absolute; bottom: 0;">Click Me</button>
</div>

html css jekyll web-frontend

Answer 1

Answer №1

To achieve the desired layout of the boxes, you can utilize display flex. By justifying the content using space-between, the buttons will always be positioned at the end.

Imagine each box as your personalized card.

.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
height: 320px;
border: 1px solid #000000;
}

<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor egestas sem. 
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>

Answer 2

To achieve the desired layout of the boxes, you can utilize display flex. By justifying the content using space-between, the buttons will always be positioned at the end.

Imagine each box as your personalized card.

.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
height: 320px;
border: 1px solid #000000;
}

<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor egestas sem. 
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>

Answer 3

Answer №2

design the parent div of a button with position:relative set the button with position: absolute; bottom:0

.container{
display:flex;
}

.box{
position:relative;
outline: 1px solid black;
height: 300px;
margin:5px;
padding:5px;
display:flex;
flex-direction: column;
align-items: center;
}

button{
position:absolute;
bottom: 10px
}

<div class="container">
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>
<div class"bottom">

<!--button-->

<button> Tell me more</button>
</div>
</div>
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>


<!--button-->

<button> Tell me more</button>
</div>
</div>

Answer 4

design the parent div of a button with position:relative set the button with position: absolute; bottom:0

.container{
display:flex;
}

.box{
position:relative;
outline: 1px solid black;
height: 300px;
margin:5px;
padding:5px;
display:flex;
flex-direction: column;
align-items: center;
}

button{
position:absolute;
bottom: 10px
}

<div class="container">
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>
<div class"bottom">

<!--button-->

<button> Tell me more</button>
</div>
</div>
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor 
egestas sem. 
</p>
</div>


<!--button-->

<button> Tell me more</button>
</div>
</div>

Is there a way to attach HTML buttons to the bottom of their respective cards?

Answer №1

Answer №2

Similar questions

Error in WebGL rendering: attribs are not configured properly

Ensuring the input element is correctly aligned in its position

Ways to automatically adjust the margins of my HTML body page

dirpagination fails to display all rows in the dataset

The error code TS2554 is triggered when 5 arguments are passed instead of the expected 3-4

What is the process for updating the CSS style of every other piece of data (such as an image) retrieved

Responsive Bootstrap 4 Login Form with customized top height

I could use some input on the best way to make a background video fill the screen while incorporating overlay text

Using Jquery to loop through various select options within a designated container div

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

Highlighting DOM elements that have recently been modified in Angular

Steps for transferring data between two components

Bootstrap overrides the color of the calendar year in jQuery UI

What is the method for inserting line breaks in Django at particular characters?

Trying to resolve w3 validator error and warning issues

Start CSS3 Animation Automatically

Two-column dropdowns without the use of tables

Make a diagonal border using CSS styling

Navigating from an offspring link to a social media platform page

Discover the best method for transferring MySQL data between pages