position div to bottom of containing div
CssPositionCss Problem Overview
How can i position a div to the bottom of the containing div?
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</div>
This code puts the text "inside" to the bottom of the page.
Css Solutions
Solution 1 - Css
.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.
Solution 2 - Css
Assign position:relative to .outside, and then position:absolute; bottom:0; to your .inside.
Like so:
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
Solution 3 - Css
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.