How to lock a div to the top, while locking the contents to the bottom of the div?

Question

I'm converting files to PDF using Pandoc and I'm using HTML/CSS to style the documents, so everything will apply to print only and not to screen.

I want to replicate the "header" of a Word document. I've created a div and I'm using this to get it to show up at the top of every page:

.div_header {
    position: fixed;
    top: 0;
    width: 100%;
}

Inside div_header, I want 3 columns: an image aligned all the way to the left, a category centered in the middle, and 2 items (doc title & ver #) aligned all the way to the right. I want it to look like this:

This is what I have so far:

<div style="border: 1px solid black" class="div_header">
  <div>
    <img
      class="left bottom"
      src="images/my_image.png"
      alt="My Image"
    />
  </div>
  <div class="center bottom">Category</div>
  <div class="right bottom">
    <div class="right-text bottom">Title</div>
    <br />
    <div class="right-text bottom">Version 0.24</div>
  </div>
</div>

.div_header {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.right-text {
  text-align: right;
}
.bottom {
  bottom: 0;
}

This comes out looking like this:

The image seems to be snapped to the bottom, but the Category, Title, and Version are aligned to the top, despite having the bottom: 0 set. How do I get those all to align to the bottom?

Answer 1

You just need to add with align-items: end; with display: flex; on parent div.

This align-items will be set your content items at end vertically, means at bottom.

Refer this: https://codepen.io/krushna-28/pen/NWJojyX I removed unnecessarily added code

Please note:

1. Don’t use float as it is outdated
2. You added bottom: 0 that was correct but it will not work with position: relative; for that you just need to add position: absolute;

Thank you

body {
  margin: 0;
}
.div_header {
  position: fixed;
  top: 0;
  display: flex;
  align-items: end;
  width: 100%;
  height: 400px;
  justify-content: space-between;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.right-text {
  text-align: right;
}

<div style="border: 1px solid black" class="div_header">
  <div>
    <img class="left bottom" src="images/my_image.png" alt="My Image" />
  </div>
  <div class="center bottom">Category</div>
  <div class="right bottom">
    <div class="right-text bottom">Title</div>
    <div class="right-text bottom">Version 0.24</div>
  </div>
</div>