How to center sidebar vertically without using position absolute/fixed or flexbox (oldschool way)

user_14796482 0
Viewed 89

I need to center sidebar vertically without using position: absolute or position: fixed, and also not using any css3 features, like flexbox and grid. I also may only use div, ul, and li elements. How can I do this?

Also, how can I position the footer at the bottom of the page with the same limitations?

This is my current solution using position: fixed: https://jsfiddle.net/gx82v4uo/

 .vertical-menu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
}
.vertical-menu ul {
  padding: 0;
  margin: 0;
  text-align: center;
  background: #2b3b75;
}
.vertical-menu li {
  display: block;
  color: #fff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: bold;
}
sidebar vertical-alignment css html
2 Answers

You can do this using a table.

Here is how I might accomplish it (click the 'Full page' link to see how the sidebar is vertically centered regardless of screen height):

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #ccc;
  font-family: Arial;
  height: 100%;
}

table {
  height: 100%;
  width: 100%;
  border-collapse: collapse;
}

.minimum-height {
  height: 0;
}

#main {
  width: 100%;
}

.header ul {
  padding: 0;
  margin: 0;
  text-align: center;
  background: #2b3b75;
}

.header li {
  display: inline-block;
  color: #fff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: bold;
}

.header li:hover {
  background: #3d53a3;
}

.vertical-menu ul {
  padding: 0;
  margin: 0;
  text-align: center;
  background: #2b3b75;
}

.vertical-menu li {
  display: block;
  color: #fff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: bold;
}

.vertical-menu li:hover {
  background: #3d53a3;
}

.footer {
  margin-bottom: 0px;
}

.footer ul {
  padding: 0;
  margin: 0;
  text-align: center;
  background: #424242;
}

.footer li {
  display: inline-block;
  color: #fff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: bold;
}

.footer li:hover {
  background: #646464;
}
<table>
    <tr class="minimum-height">
      <td colspan="2">
        <div class="header">
          <ul>
            <li>ITEM 1</li>
            <li>ITEM 2</li>
            <li>ITEM 3</li>
            <li>ITEM 4</li>
            <li>ITEM 5</li>
          </ul>
        </div>
      </td>
    </tr>

    <tr>
      <td id="main"></td>
      <td>
        <div class="vertical-menu">
          <ul>
            <li>ITEM 1</li>
            <li>ITEM 2</li>
            <li>ITEM 3</li>
            <li>ITEM 4</li>
            <li>ITEM 5</li>
          </ul>
        </div>
      </td>
    </tr>

    <tr class="minimum-height">
      <td colspan="2">
        <div class="footer">
          <ul>
            <li>ITEM 1</li>
            <li>ITEM 2</li>
            <li>ITEM 3</li>
            <li>ITEM 4</li>
            <li>ITEM 5</li>
          </ul>
        </div>
      </td>
    </tr>

</table>

user_61115400

This is the best I can do to help you. You need to change your styling like

<style>
    body {
      margin: 0;
      padding: 0;
      background: #ccc;
      font-family: Arial;
    }
    .header ul {
      padding: 0;
      margin: 0;
      text-align: center;
      background: #2b3b75;
    }
    .header li {
      display: inline-block;
      color: #fff;
      width: 100px;
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      font-weight: bold;
    }
    .header li:hover {
      background: #3d53a3;
    }
    .vertical-menu {
      padding: 11.2% 0;
      overflow: hidden;
    }
    .vertical-menu ul {
      padding: 0;
      margin: 0;
      text-align: center;
      background: #2b3b75;
      width: fit-content;
      float: right;
    }
    .vertical-menu li {
      display: block;
      color: #fff;
      width: 100px;
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      font-weight: bold;
    }
    .vertical-menu li:hover {
      background: #3d53a3;
    }
    .footer {
    }
    .footer ul {
      padding: 0;
      margin: 0;
      text-align: center;
      background: #424242;
    }
    .footer li {
      display: inline-block;
      color: #fff;
      width: 100px;
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      font-weight: bold;
    }
    .footer li:hover {
      background: #646464;
    }
</style>

And now you need to change the .vertical-menu padding according to the multiple device sizes if you need. You can do so using media query.

user_122911310
Related