3 column fixed header that expands height to fit content - html

Question

I'm trying to create a fixed header at the top of my page that has 3 "columns". The first is left justified on the left side, the second is centered relative to the whole page - regardless of the other two column sizes, and the third is right justified, stuck on the right. I want all of the content centered vertically.
Floats didn't really work because then the middle column was not properly centered. So I used two position: absolute div's for the left and right, and just left one div in the middle.
My problem is that I can't get the header to expand to contain the left div, which is taller, and I can't get the content to center vertically.
What am I doing wrong? Thanks!
Here is my code:
.header {
z-index: 8;
top: 0;
left: 0;
position: fixed;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
background: white;
z-index: 8;
border-bottom: 1px solid black;
text-align: center;
}
.left {
position: absolute;
top: 1rem;
left: 1rem;
border: 1px solid gray;
background: red;
padding: 1rem;
height: 10rem;
}
.right {
position: absolute;
right: 1rem;
top: 1rem;
background: yellow;
border: 1px solid gray;
}
.middle {
background: green;
border: 1px solid gray;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>
Here is the link to my fiddle.

Answer 1

I would suggest using a flexbox for the vertical alignment.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header>div {
padding: 1rem; /* To improve visibility */
width: calc(100% / 3);
}
.col1 {
text-align: left;
}
.col2 {
text-align: center;
}
.col3 {
text-align: right;
}
<header>
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>

Answer 2

Instead of the css that you have written, you can finish the above in just 8 lines. You just need to write the following:
.header{
display:flex;
}
.left, .middle, .right{
width: calc(100% / 3);
text-align:center;
}
and you can add the following class to check if everything is according what you planned to do:
*{
border: 1px solid red;
}
Here is the link to the fiddle displaying the result of the above code.
Check the result in the following stack overflow snippet:
* {
border: 1px solid red;
}
.header {
display: flex;
}
.left,
.middle,
.right {
width: calc(100% / 3);
text-align: center;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>