I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?
Fixed. The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling.
Try position:fixed; bottom:0; . This will make your div to stay fixed at the bottom. Hope this helps.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
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.
So, either set the outer div as an inline element, or as a table-cell
:
#outer {
height: 200px;
width: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: bottom;
}
#inner {
border: 1px solid green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
Nowadays you can simply use display: flex
for all these alignment issues.
In your case you can simply make the parent a flex, flex-direction column
(the default is row) and justify-content: flex-end
. The advantage of this approach is that it also works if you have multiple items in the parent.
If you have multiple ones and want to have them all aligned from the beginning of the parent till the end, you can change justify-content
to another property such as space-between
or space-evenly
.
#outer {
height: 200px;
width: 200px;
border: 1px solid red;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
#inner {
border: 1px solid green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
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