Is there a CSS equivalent for float: down

Question

I was wondering if there is any CSS equivalent:

float: down;

or in some way make an element or div at the bottom of the page. Any help is appreciated.

Answer 1

You can set it like this:

bottom: 0;
position: fixed;

I believe you will like it with him:

z-index: 9999;

All of the above together will make the element stick to the bottom even when scrolling through the page.

Answer 2

Using flexboxes, you can set a child 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>

Run codeHide result

Alternatively you will need to use positioning absolute/ fixed.

Example here

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

, .

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

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

Hide result