Is there a CSS equivalent to float: down

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.


solution

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>