Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link

<div class="parentbox">
    <div class="childbox">
        <div id="subfooter">
        keep on bottom of box
        </div>
    </div>
</div>

<style>
.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
    text-align: center;
}

.parentbox:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle; 
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          
    padding: 5px;
    border: 2px solid black;
    height:40%
}
</style>

Additionally, I need to ensure that the text 'keep on bottom of box' is vertically aligned.

htmlcss

Answer №1

Give it a shot at least once.

HTML

<div class="wrapper">
    <div class="box">
        <div id="footer">
        stay at the bottom of the container
        </div>
    </div>


</div>

CSS

.wrapper {
    width: 500px;
    height: 400px;
    border-style: solid;
    text-align: center;
    position: relative;
}

.wrapper:before {      
    content: ' ';
    display: inline-block;
    vertical-align: middle; 
    height: 100%;
}

.box {
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    border: 2px solid black;
    position: absolute;
    bottom: 5px;
    left: 12% !important;
}

Answer №2

After giving it a shot, do you think this is what you had in mind?

All I did was include 

position: absolute;

In the .parentbox, and 

position: absolute; bottom: 0;

In the .childbox

I hope this provides some clarity.

Answer №3

give this jsfiddle a try, it seems to be what you are looking for

HTML

<div class="parentbox">
<div class="childbox">
    <div id="subfooter">
    <div class = "footer">
    keep on bottom of box
    </div>
    </div>
</div>

CSS

    .parentbox {
    width:500px;
    height:400px;
    border-style:solid;

    text-align: center;  /* align the inline(-block) elements horizontally */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    padding: 5px;
    border: 2px solid black;
    height:40%
}
.footer {
    padding-top: 145px;
}

https://jsfiddle.net/2L6yjckz/

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

JavaScript can be used to open several tabs simultaneously within a single browser window

Looking to open multiple tabs in the main browser? Check out this code snippet: function openSM() { window.open("http://www.google.com","_blank"); window.open("http://www.yahoo.com","_blank"); window.open("http://www.bing.c ...

javascripthtml

Looking for a way to include the current page's HTML code when exporting a CSV file

Here is the HTML code showcasing the Export button: <form method="post" name="download_csv" class="pull-right" enctype="multipart/form-data"> <button type="submit" name="Export" class="btn btn-success" >Export to excel</button> < ...

phphtmlexcelcsvexport-to-csv

What is the best way to ensure that the size and maximum length of a text input box are properly aligned?

Is there a way to ensure that the size and maxlength attributes of a text input box align correctly? It can be frustrating when these attributes don't match up due to font differences. Example Input: <input type="text" size="4" maxlength="4" /> ...

htmlcssforms

How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

I'm struggling with making the sidebar independent of the main content when it's opened. I've included the CSS and JavaScript code below. Can someone provide assistance with this? function ExpandDrawer() { const drawerContent = docu ...

javascripthtmlcsssidebar

Problem with looping through arrays in JQuery using .each() function

Looking for some help with jQuery and JavaScript, please bear with me if my question seems naive. I am attempting to load images from different folders into corresponding divs to create a gallery. <div id="menu"> <div class="gallery" id="div0"&g ...

jqueryhtmlarraysimage-galleryeach

What steps should I take to access additional details by clicking on an item using PHP?

This is my first time working with PHP. I have successfully loaded some items on my page, and now when I click on an item, I want to display more information about it. Below is the code for connecting to the database: <?php $servername = "localhost:330 ...

phphtmlmysqlhttpphpmyadmin

IE9 crashes when displaying elements with float:left style

After clicking the "off" and then "on" hyperlink in the provided HTML snippet, IE9 crashes. Here is the simplified version of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD& ...

htmlinternet-explorer-9

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

htmlcssfooteroverlapsticky

Text with Icon Fonts Does Not Align Vertically

I'm using icon fonts in a nav list and I want to place text between two of the icons. However, there's an issue with alignment - the icons are positioned higher than the text, causing them to not match up well. Is there a solution to this problem ...

htmlcssicon-fonts

Getting variables from different functions in Python can be achieved by using the return

I am trying to implement a feature where I can fetch a search term from the function getRandomVideo() and then use it in a jQuery statement. For example, if I get "Beethoven" as the search term from the variable searches, I want to use it to retrieve JS ...

javascriptjqueryhtml

Make sure that the HTML5 application is fixed inlandscape mode

I'm in the process of developing a basic HTML5/CSS3/Javascript application that needs to be compatible with all major mobile platforms - android, ios, and windows-phone. My goal is to have the app only function in landscape mode, even if the user hold ...

androidioshtmlwindows-phone-8

Do custom Bootstrap 4 variables fail to cascade downwards?

Discovering a strange behavior in the custom.scss file of Bootstrap, I realized that setting a custom color and removing the !default flag doesn't cascade down as expected. For example, updating $blue to #000 without !default in _custom.scss should id ...

csstwitter-bootstrapsassbootstrap-4

Issues with Opera displaying specific characters when using webfonts

Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...

htmlcssfont-facewebfonts

What is the reasoning behind the presence of hidden elements on the Google Search Result Page?

While using the debugging feature, I stumbled upon some hidden elements on the page. Can anyone shed some light on why these elements are present with a display attribute of none? The first one on the left is an iframe, followed by multiple text areas. ...

htmlcss

Updating the PHP form to include functionality for a reset button and adjusting the logic for

Having some difficulties with my PHP form. I created a simple form that consists of the following logic: if (isset($_POST['submit'])) { } elseif (isset($_POST['confirm'])) { } else { } The form includes a submit button, followed by a ...

phphtmlformsreset

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

htmlcss

Display email address in a concise manner

Managing user information in my project involves capturing both username and email address. While the username is optional, the email address is mandatory with a maximum length of 100 characters. My issue arises when the email address exceeds 60 character ...

jqueryhtmlcss

Difficulty aligning headings in HTML

I'm puzzled by a strange 1px gap on the left of my h2 heading, which sits atop an h3. The font sizes are set to 40px for h2 and 12px for h3. Can anyone help me solve this mystery? Any assistance would be greatly appreciated! Thank you body { pa ...

htmlcss

How to configure dropdown options in Angular 2

I have been struggling to set the display of a select tag to the value obtained from another call. Despite my attempts with [selected], [ngValue], [value], and more, I have not been successful. <select class="form-control" [(ngModel)]="selectedRegion" ...

htmlangularselectdefault-valuedisplay

The hierarchical structure in the DOM that mirrors an HTML table

While working on code to navigate the DOM for a table, I encountered an unexpected surprise. The DOM (specifically in FF) did not align with my initial expectations. Upon investigation, it appears that FF has automatically inserted a tbody along with sever ...

javascripthtmldom