How to align 3 divs to the top middle and bottom of a page?

Question

I need to align 3 divs to the top, middle and bottom of a webpage Below is my current code.

JS Fiddle

<div class="container">
    <div class="logo">
        My Logo
    </div>
    <div class="nav">
        My Nav
    </div>
    <div class="base">
       Base
    </div>   
</div>

I have tried using table/table-cell method but each section then sits side by side.

The container needs to be fixed and the nav should be vertically aligned.

Any ideas to make is so the logo div is at the top, the nav div is in the middle and the base div is at the bottom?

Answer 1

You could do it with CSS table, I added a <div> to each block.

jsfiddle

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  background: gold;
  width: 100%;
  height: 100%;
  display: table;
}
.container .row {
  display: table-row;
}
.container .cell {
  display: table-cell;
}
.logo .cell {
  vertical-align: top;
}
.nav .cell {
  vertical-align: middle;
}
.base .cell {
  vertical-align: bottom;
}

<div class="container">
  <div class="row logo">
    <div class="cell">My Logo</div>
  </div>
  <div class="row nav">
    <div class="cell">My Nav</div>
  </div>
  <div class="row base">
    <div class="cell">Base</div>
  </div>
</div>

You could also make it with flexbox layout.

jsFiddle

body {
  margin: 0;
}
.container {
  background: gold;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="row logo">Logo</div>
  <div class="row nav">Nav</div>
  <div class="row base">Base</div>
</div>