Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with:

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}
<div class="flex-container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

I'm trying to figure out how to keep box2 centered while positioning box1 at the bottom of the flex container. The issue is that when I use 'bottom' on box1, it only goes to the end of the padding due to the flex container having padding. Additionally, when I absolutely position box1, it causes box2 to stretch and fill the entire flex container since box1 is no longer part of the document flow.

htmlcssflexbox

Answer №1

It appears that your goal is not entirely clear, but based on my understanding, the following code could potentially provide a solution.

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
  border: 3px solid black;
}

div {
  text-align: center; // not necessary
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

.box2 {
  border: 1px solid red;
  height: 20px;
  width: auto;
  padding: 5px;
}
<div class="flex-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

EDIT: To truly center the element, consider adding the padding from either box or box2 to the container as an artificial height, or utilize the calc() method.

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

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

VSCode displaying HTML errors within a .ts file

There is a strange issue with some of my .ts files showing errors that are typically found in HTML files. For example, I am seeing "Can't bind to 'ngClass' since it isn't a known property of 'div'" appearing over an import in ...

htmlangulartypescript

Step-by-step guide on displaying a fresh page within a JavaScript code

I've been working with XHTML, JSF, and JavaScript to develop a form that validates user input in selected fields when a button is clicked. The goal is to redirect the user to a different page called homepage.xhtml after successful validation. However, ...

javascripthtmljsfxhtml

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

Align the parent div center and have both dynamic and fixed width child divs inside

In the main parent div, there is a combination of my logo and navigation bar. The logo has a fixed width while the dynamic-width navigation bar is positioned 100px to the right of the logo. However, the current layout places them on the left side of the s ...

htmlcssdynamicwidthcenter

Encountered a problem while trying to update a list item in Vue.js

Greetings Everyone, I've successfully implemented a basic CRUD functionality in VueJS. The values are being inserted into a list, from which I can read and delete them. However, I'm facing an issue with updating any value. When I try to ...

htmlvue.js

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

javascripthtmlcss

color of the foreground/background input in a dropdown menu that

I am attempting to modify the foreground or background color utilized by a dash searchable dropdown when text is entered for searching in the list. The input text is currently black, which makes it extremely difficult to read when using a dark theme. Wit ...

pythoncssplotlydropdownplotly-dash

Tips for managing three select menus in AngularJS

Assistance needed for creating a series of interconnected dropdown menus in AngularJS. The functionality should allow the second dropdown to open upon selecting a value in the first dropdown, and the third dropdown to open upon selecting a value in the sec ...

htmlangularjsselect

Link PayPal payments to the individual making the payment

On my website, I offer in-game features that can be purchased through a miniature store with PayPal buy now buttons. I'm looking for the best and most secure method to automatically deliver these in-game bonuses to users after they have completed thei ...

phphtmlpaypal

How can I modify the CSS of every fourth element using jQuery?

Is there a way for jQuery to update the styling of every fourth item (div) within another div? I've been searching without success... Any guidance would be greatly appreciated :) ...

jquerycsshtml

Activate outline styling for Bootstrap radio buttons when clicked

I was in the midst of developing my bootstrap application. Every time I click on a radio button, there is a noticeable blue outline as shown here: https://i.sstatic.net/Uzm7b.png I attempted to address this issue using the following CSS code: .form-chec ...

htmlcsstwitter-bootstrap

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation

Tips for preventing PyCharm from automatically completing HTML and Django template tags

While working on Django templates in PyCharm, I noticed that it automatically closes the tags. This can be helpful when starting a new tag, but it becomes annoying when I want to place existing content within a different tag because I have to delete or mov ...

htmldjangopycharm

The impact is felt across every button in CSS

Why is this happening? When I hover over a button, all buttons apply the effect, which should not be the case. I only want the effect to be applied to the button that I am hovering over. .buttons{ font-family: arial; text-decoration: none; padding ...

htmlcss

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

javascriptjqueryhtmlcss

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input