Is there a CSS equivalent to float: down

Question

I was wondering if there is some sort of CSS equivalent to:

float: down;

or some way make a element or div go to the bottom of the page. Any help is appreciated.

Answer 1

Using flexboxes, you could set the child element to align-self: flex-end.

Example Here

.parent {
    display: flex;
}
.child {
    align-self: flex-end;
}

.parent {
    height: 200px;
    border: 5px solid #000;
    display: flex;
}
.child {
    height: 40px;
    width: 100%;
    background: #f00;
    align-self: flex-end;
}

<div class="parent">
    <div class="child">
        Align to the bottom
    </div>
</div>

Alternatively, you would have to use absolute/fixed positioning.

Example Here

.align-bottom {
    position: absolute;
    bottom: 0;
}

In some cases, you would also have to relatively position the parent element so that the absolute positioning is relative to it.

body {
    min-height: 100vh;
}
.align-bottom {
    position: absolute;
    bottom: 0;
}

<div class="align-bottom">Align to the bottom</div>

Answer 2

You can set it that way:

bottom: 0;
position: fixed;

I suppose you'll like this as well with it additionally:

z-index: 9999;

All above together will make the element stick to the bottom even when you scroll the page.