I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue?
Thank you in advance for helping me solve this problem.
You can check out the live demo in the comments section below.
Here is a screenshot of the problem:
https://i.stack.imgur.com/zZhjS.png
This is the result I am aiming for:
.buy-tg{
font-weight: 700;
color: #1562ad;
}
#pro-price {
background-color: #f1f2f3;
}
.card-pricing.popular {
z-index: 1;
border: 3px solid #1562ad;
}
.card-pricing .list-unstyled li {
padding: .5rem 0;
color: #6c757d;
}
.div-button {
color: black;
}
.card-deck {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.card-deck .card {
margin-bottom: 15px;
}
@media (min-width: 576px) {
.card-deck {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
.card-deck .card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
/*added css*/
.card-body{
display: flex;
flex-direction: column;
justify-content: space-between;
}<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c9788978a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="pro-price pt-5" id="pro-price">
<div class="container mt-5">
<div class="pricing card-deck flex-column flex-md-row mt-5">
<div class="card card-pricing text-center px-3 mb-4">
<span
class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Single User</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span
class="price">3</span></h1>
</div>
<div class="card-body pt-0">
<div class="position-a">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
</div>
<div class="position-b">
<button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
<p class="div-button">Or</p>
<button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
</div>
</div>
</div>
<div class="card card-pricing popular shadow text-center px-3 mb-4">
<span
class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Administrator License</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span
class="price">6</span></h1>
</div>
<div class="card-body pt-0">
<div class="position-a">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Monthly updates</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
<li>Free cancelation</li>
<li>Free cancelation</li>
</ul>
</div>
<div class="position-b">
<button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
<p class="div-button">Or</p>
<button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
</div>
</div>
</div>
<div class="card card-pricing text-center px-3 mb-4">
<span
class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Technician License</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span
class="price">9</span></h1>
</div>
<div class="card-body pt-0">
<div class="position-a">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
<li>Free cancelation</li>
</ul>
</div>
<div class="position-b">
<button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
<p class="div-button">Or</p>
<button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
</div>
</div>
</div>
<div class="card card-pricing text-center px-3 mb-4">
<span
class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Enterprise License</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">$<span
class="price">12</span></h1>
</div>
<div class="card-body pt-0">
<div class="position-a">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
</div>
<div class="position-b">
<button type="button" class="btn btn-primary mb-3">Pay with share*it</button>
<p class="div-button">Or</p>
<button type="button" class="btn btn-primary mb-3">Pay with Paypal</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0718071a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>.container {
height: 300px;
background-color: skyblue;
position: relative
}
.element {
height: 50px;
width: 50px;
background-color: pink;
position: absolute;
bottom: 0;
}
.element2 {
height: 50px;
width: 50px;
background-color: pink;
position: absolute;
bottom: 0;
right: 0;
}<div class="container">
<div class="element">
</div>
</div>
<br/>
<div class="container">
<div class="element2">
</div>
</div>This code will adjust the placement of the child div element based on the container's positioning.
<div class="wrapper">
<div class="item1"></div>
<div class="item2"></div>
</div>
<style>
.wrapper {
display: flex;
border: 1px solid #000;
height: 200px;
}
.item2 {
margin-top: auto;
border: 1px solid #000;
height: 50px;
}
.item1 {
border: 1px solid #000;
height: 50px;
}
</style>
Give this a shot within your division
{
display: flex;
justify-content: center;
}
I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...
In German decimal numbers, a decimal comma is used. When formatting, periods are also used for grouping digits. For example, the number 10000.45 would be formatted as 10.000,45. I am looking to create an input field (numeric or text) where users can input ...
Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...
Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...
On a simple webpage using bootstrap and js/jquery, data is fetched via ajax to create entries displayed to the viewer. The process involves: - making a request - parsing XML to create an array of objects with all the data - sorting by one property - cr ...
I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details. However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the ne ...
I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...
I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...
Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...
Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...
I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...
It's common knowledge that JavaScript commands from Google can be used to control YouTube videos, while Vimeo provides its own JavaScript commands for their videos. Both videos are typically embedded within 'iframes' on websites. I'm ...
I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...
Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...
I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...
Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...
Currently, I am utilizing the DataTable.js plugin to showcase data in a table. Below is the code snippet that I am using to insert a new row into the table. var new_row = table.row.add({ "select": '<input type="checkbox" />&apos ...
I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...
I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...
I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...