CODEWITHSUNDEEP
htmlcss
Kayson
Kayson

Reputation: 405

3 column fixed header that expands height to fit content

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.

Upvotes: 2

Views: 414

Answers (2)

Code_Ninja
Code_Ninja

Reputation: 1877

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>

Upvotes: 1

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 5

Related Questions