position a div element at the bottom of its parent container

I am facing a challenge with this issue:

I want to position a red div at the bottom of another div.

The red div should always stay at the bottom of its parent div.

    .homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-b{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-c{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-d{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    .test{
    position:relative;
    bottom:0;
    background-color: red;
    }
    <div class="homepage-wrapper">
        <div class="homepage-top-category-container">
            <div class="homepage-top-category-container-title">
                <span id="homepage-top-category-container-title">Most popular aisles</span>
            </div>
            <div class="homepage-top-category-container-list">
                
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                    block A
                    <div class="test">
    button
                    </div>               
                </div> 
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
    block B
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
    block C
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
    block D
               </div>
            
            </div>
        </div>
    </div>

Any assistance from our community would be greatly appreciated. Thank you.

javascriptjqueryhtmlcss

Answer №1

If you previously utilized flex, consider using it again and incorporating margins to the button for simplification:

.homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    width: 240px;
    height: 360px;
      display:flex;/* added */
      flex-flow:column;/* added */
    }
    #homepage-top-category-container-item-b{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-c{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-d{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    .test{
      margin-top:auto;/* added */
      margin-bottom:0;/* added */
        background-color: red;
    }
<div class="homepage-wrapper">
        <div class="homepage-top-category-container">
            <div class="homepage-top-category-container-title">
                <span id="homepage-top-category-container-title">Most popular aisles</span>
            </div>
            <div class="homepage-top-category-container-list">
                
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                    block A
                  <p>paragraph</p>
                    <div class="test">
    button
                    </div>               
                </div> 
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
    block B
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
    block C
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
    block D
               </div>
            
            </div>
        </div>
    </div>

Therefore, the concept is to apply margin-top:auto to the button to move it downwards, while the other sides can have varying values.

If auto is set for all four sides, the button will be centered in the empty space (demonstrated in the snippet below).

.homepage-wrapper{ 
        max-width: 1028px;
        margin-left: auto;
        margin-right: auto; 
        }
    .homepage-top-category-container-title{
        background-color: black;
        margin-bottom: 10px;
        padding: 15px 0 15px 0;
        }
    #homepage-top-category-container-title{
        color: orange;
        }
    .homepage-top-category-container-list{
        display: flex;
        flex-wrap:wrap;
        width: auto;
        height: auto;
        background-color: yellow; 
        }
    .homepage-top-category-container-item{
        display: block;
        float: none;
        width: auto;
        height:auto;
        border: solid 1px black;
    }
    #homepage-top-category-container-item-a{
    width: 240px;
    height: 360px;
      display:flex;/* added */
      flex-flow:column;/* added */
    }
    #homepage-top-category-container-item-b{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-c{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    #homepage-top-category-container-item-d{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
    .test{
      margin:auto;/* added */
        background-color: red;
    }
<div class="homepage-wrapper">
        <div class="homepage-top-category-container">
            <div class="homepage-top-category-container-title">
                <span id="homepage-top-category-container-title">Most popular aisles</span>
            </div>
            <div class="homepage-top-category-container-list">
                
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
                    block A
                  <p>paragraph</p>
                    <div class="test">
    button
                    </div>               
                </div> 
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
    block B
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
    block C
                </div>
                <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
    block D
               </div>
            
            </div>
        </div>
    </div>

Answer №2

To achieve the desired layout, adjust the parent's position to relative and the child's position to absolute. You can view an example here: https://jsfiddle.net/yak613/d43eytfb/

.homepage-wrapper{ 
    max-width: 1028px;
    margin-left: auto;
    margin-right: auto; 
    }
.homepage-top-category-container-title{
    background-color: black;
    margin-bottom: 10px;
    padding: 15px 0 15px 0;
    }
#homepage-top-category-container-title{
    color: orange;
    }
.homepage-top-category-container-list{
    display: flex;
    flex-wrap:wrap;
    width: auto;
    height: auto;
    background-color: yellow; 
    }
.homepage-top-category-container-item{
    display: block;
    float: none;
    width: auto;
    height:auto;
    border: solid 1px black;
    position: relative;

}
#homepage-top-category-container-item-a{
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-b{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-c{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
#homepage-top-category-container-item-d{
    margin-left: 20px;
    width: 240px;
    height: 360px;
    }
.test{
    position:absolute;
    left: 0;
    right: 0;

    bottom:0;
    background-color: red;
    }

Answer №3

To affix an item to the bottom of its container

#element{
   position: fixed;
   bottom: 0;
}

However, if it functions as a footer, ensure the parent container has a defined height and is anchored to the bottom of the page.

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

Learn how to incorporate an input field into a form using the same class name

I am facing a challenging JavaScript issue that I have been struggling to resolve. My predicament involves a dynamically formed table with form fields. Here is the code snippet in question: var table = document.getElementById("table"); var row = table. ...

javascriptjqueryajaxforms

Encountering a JSON Parse error when using jQuery Ajax with the Wikipedia API

When I attempt to Parse JSON data using the Wikipedia API, the URL successfully returns json data. I am specifically looking for the snippet part of the search notation in the response, but encountering errors. I have included the code below for your revie ...

jqueryajax

Navigating the world of gtag and google_tag_manager: untangling

Tracking custom events in my react application using Google Analytics has been successful. Initially, I followed a helpful document recommending the use of the gtag method over the ga method for logging calls. The implementation through Google Tag Manager ...

javascriptreactjsgoogle-analyticsgoogle-tag-managernext.js

"Trouble with Express.js: CSS isn't loading, yet HTML displays

Click here to view folders and files server.js is the code I have created so far //importing packages const express = require('express'); const admin = require('firebase-admin'); const bcrypt = require('bcrypt'); const path = ...

javascripthtmlcssexpressnpm

Should you approach TypeScript modules or classes with a focus on unit testing?

When it comes to unit testing in TypeScript, which content architecture strategy is more effective: Creating modules or classes? Module Example: moduleX.method1(); // Exported method Class Example: var x = moduleX.method1(); // Public method ...

javascripttypescript

What are some ways to create a one-sided design without being limited by container constraints

How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my ...

htmlcss

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

javascriptreactjsmaterial-ui

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

One issue I encountered was that when I generated page number buttons at the bottom of a page, the onclick event only worked with the last button created. Below is an example of how the page buttons were displayed: https://i.stack.imgur.com/wHwI0.png ...

javascripthtml

When HTML/JS code is utilized, the submit button or image should function to open the same page as

In addition to the left and right mouse buttons, you also have a middle mouse button. If you click on an image or hyperlink with this middle mouse button while browsing any website, it will open a new window in the background. Now, I want to achieve a sim ...

javascripthtmlformssubmit

Create a distinct CSS animation 'origin' declaration for every <g> element

I am using CSS animation to apply a 'wobble' effect to each letter within a word. The letters are represented by SVG groups <g>. However, in the provided example, the wobbling effect becomes more pronounced with each subsequent letter, wher ...

cssanimationsass

The AJAX request is not executing the xmlhttp.open method for running the script

Currently, I am making adjustments to the tutorial available at this website: http://www.w3schools.com/ajax/ajax_aspphp.asp. My modification involves storing a library of autocomplete names in a database. I have implemented a button that allows users to ...

phpjavascripthtmlxmlajax

Centering an unordered list and ensuring the image is responsive across different screen sizes are both top priorities for this design

Currently, I am working on an HTML project through freecode academy and encountering some obstacles. My goal is to center align the unordered list and make sure that the image responds well to various screen sizes. Please feel free to leave comments with ...

htmlcss

How can I extract the JSON value as a string?

I have a scenario where I define two objects. The first object, BOB, has properties "name" with a value of "bob" and "height" with a value of 185. var BOB = { "name": "bob", "height": 185 }; The second object, PROPS, references the height property from ...

javascriptjson

Verifying the format of an object received from an HTTP service using a TypeScript interface

Ensuring that the structure of the http JSON response aligns with a typescript interface/type is crucial for our javascript integration tests against the backend. Take, for example, our CurrentUser interface: export interface CurrentUser { id: number; ...

javascripttypescript

Encountering a 'DiscordAPIError: Unknown interaction' error while attempting to share details about a command

As I work on a slash command to deliver information about a specific command when users type /help, I encountered an error when trying to add multiple commands: E:\v13\node_modules\discord.js\src\rest\RequestHandler.js:298 ...

javascriptnode.jsdiscorddiscord.js

Building/Deleting the Vue Component using text search

In my App.vue file, I have the following setup: <template> <div id="app"> <input type="text" v-model="term"> <hello-world text="Button 1" v-if="term === ''"></hello-world> <hello-world ...

javascriptvue.jscomponents

The CSS3 selector matching a value starting with "[attribute^=value]" does not match a value that has spaces after the quotation marks

When using the div[class^="test"] selector, keep in mind that it will not select an element with a class attribute like class=" test-something" (This selector was generated on the backend.) Using the div[class^=" test"] is not a valid choice. ...

csscss-selectors

A guide to dynamically display input fields according to the selected mat-radio button in Angular Material

I am currently utilizing angular material version 9.2.4 Within my project, I am implementing the angular material mat radio button with an input field. Each payment method will have its own corresponding input field. When the 'Cash' option is se ...

javascriptangulartypescriptangular-material

Implementing email validation on the view layer for the yii framework using JavaScript

<script type="text/javascript"> function validate() { var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([ ...

javascriptphphtmlyii

Issue with e2e.js file format in Cypress Support

I am trying to save Cypress screenshots into a report using a support file as recommended in the documentation. However, I keep encountering an error: Your supportFile is missing or invalid: support/e2e.js The supportFile must be a .js, .ts, .coffee file ...

javascripttypescriptcypress