Currently, I am using Pandoc to convert files to PDF and incorporating HTML/CSS for document styling, specifically for printing purposes rather than for screen display.
My objective is to replicate the "header" of a Word document. To achieve this, I have set up a div and implemented the following CSS to ensure it appears at the top of each page:
.div_header {
position: fixed;
top: 0;
width: 100%;
}
Within the div_header, I aim to have three columns: an image aligned to the far left, a category centered in the middle, and two items (document title and version number) aligned to the far right. The desired layout is illustrated in this image:
https://i.sstatic.net/7Oxav.png
My current progress is as follows:
<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;
}
As a result, the output appears like this: https://i.sstatic.net/ncUlQ.png
Although the image seems to be correctly aligned at the bottom, the Category, Title, and Version are top-aligned despite setting bottom: 0. How can I ensure that all elements align at the bottom?