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

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

javascriptcssangulardrag-and-droptranslate3d

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

htmlcss

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Does anyone else have trouble with IE? (Or is it just me?) I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high. However, in IE there's a strange blank space between the first and se ...

jquerycssinternet-explorerhtml-lists

What is the correct way to display single line code snippets in Firefox?

When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): The HTML code responsible for this display is automatically generated by Hugo and appears as follow ...

htmlcss

Using a Custom Variable in PayPal Email Links

Currently, I am developing a compact integrated application for a project that does not involve using a form. In this particular project, the use of HTML is not necessary and instead, only a link can be passed to the browser. The purpose of this link is to ...

phphtmlpaypal

How to create a donut chart in Highcharts without an inner pie section?

I've been scouring the internet in search of a solution to create a basic donut chart using the Highcharts library. Most examples I come across show donut charts with both an inner pie and outer donut (see here). Is there a way to remove the inner pi ...

javascripthtmlhighchartsdonut-chart

Ensure that HTML Tidy does not disrupt meta tags, specifically schema markup

Encountering a significant issue with the latest version of HTML Tidy - visit https://html-tidy.org. To summarize: HTML Tidy is altering these HTML code lines: <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <div cla ...

phpwordpresshtmlhtmltidy

Range slider position not being updated after user interaction

I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...

javascripthtml

Is there a way to enhance the appearance of a TextField in JavaFX to resemble the sleek design of Android or material UI?

Is there a way to create a window like this in JavaFX? Take a look at the textfield shown in the image below... I recently came across the Jphonex framework that allows for this type of display. However, when I package it into a Jar file and try to run it ...

androidcssjavafxscenebuilderscene

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

javascripthtmlangularangular-formsangular-validation

Retrieving Hyperlinks from JavaScript Object for Integration with D3-Created Table

Issue: I'm facing a problem where the HTML link extracted from an Associative Array is treated as a string instead of being applied as a clickable link in the browser. For a detailed visual example and code snippet, visit: http://example.com/code Da ...

javascripthtmld3.js

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Question: <md-list-item> <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon> <div class="md-list-item-text"> <p>{{ transcript.text }}</p> </di ...

cssvue.jsmaterial-designvue-material

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

javascriptjqueryhtmlcss

Inconsistency in div height caused by positioning disparities

My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...

htmlcss

What is the best way to remove a specific HTML section using a JavaScript function?

I am struggling to figure out how to remove a specific HTML section using a button that is contained within the section itself. The section I want to delete was initially added by clicking a different button. Although I can successfully add a new section ...

javascripthtml

Adjust the text area to automatically expand or shrink based on the text it contains

Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...

javascriptjqueryhtmlcss