Menu
Try position:fixed; bottom:0; . This will make your div to stay fixed at the bottom.
To align the div content to the bottom, use position: relative to the container class and position: absolute to the div element.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
Without using position: absolute , you'd have to vertically align it. You can use vertical-align: bottom which, according to the docs: The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Needs to be
.outside {
position: relative;
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn't defined it will use the body.
Assign position:relative to .outside, and then position:absolute; bottom:0; to your .inside.
Like so:
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
Add position: relative to .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
The "initial container" would be <body>, but adding the above makes .outside positioned.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With