Bdtjtk

So I have a menu item "header" (dark color) on the left side. And on the right side I will have my hero "main" page and bellow "sections". The only scroll I want to have is up/down and no side to side, and I want to center the main / sections pages.

So first "header" item will be:

width: 80px;

And now, I want the other elements such as "main" to stick to that menu item. Currently my problem is that I have to keep changing numbers for "hero" page so it will align correctly at the center, but it's a pain and i cant seem to get the numbers right, i always get either page is like 2px behind the menu or opposite.

So is there any way to rewrite the code so the "main" section will stick to the side of "menu" bar automatically, even if I change the menu width ?

https://codepen.io/MariusZMM/pen/xmPraj

<div id="header"></div>



  <div id="main">

    <div class="box"></div>



    <div id="sections">

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sunt repudiandae unde doloremque eos sed

        dolorem sit quae totam impedit. Exercitationem ad alias quae ipsam, maxime molestias quibusdam fugit

        doloribus.

      </p>

    </div>

  </div>

CSS

body {

  margin: 0;

  padding: 0;

}



#header {

  background: #222629;

  height: 100%;

  left: 0;

  position: fixed;

  text-align: center;

  top: 0;

  z-index: 1;

  overflow-y: auto;



  /* Menu size*/

  width: 80px;

}



#main {

  position: absolute;

  height: 100%;

  background-color: #856030;



  /* Hero page size*/

  margin-left: 6.25%;

  width: 97.5%;

}



.box {

  width: 100%;

  position: relative;

  height: 100%;

}



#sections {

  position: absolute;

  background-color: #347424;

}

I think I have figured it out, updated on CodePen
https://codepen.io/MariusZMM/pen/Newvqb

So what I've done, is used "left" for "main" section and set it to same px count as menu. Then also added "left: 0;" for "header"

Would this be the correct way to handles this or is there a better way?

body {

  margin: 0;

  padding: 0;

}



#header {

  background: #222629;

  height: 100%;

  left: 0;

  position: fixed;

  text-align: center;

  top: 0;

  z-index: 1;

  overflow-y: auto;



  /* Menu size*/

  width: 80px;

}



#main {

  position: absolute;

  height: 100%;

  right: 0;



  background-color: #2c2419;



  /* Hero page size*/

  left: 80px;

  width: auto;

}



.box {

  width: 100%;

  position: relative;

  height: 100%;

}



#sections {

  position: absolute;

  background-color: #347424;

  width: 100%;

}

Based on my understanding i modified the code like below.
other method to adjust the width dynamically is using javascript.

body {

  margin: 0;

  padding: 0;

}



#header {

  background: #222629;

  height: 100%;

  left: 0;

  position: fixed;

  text-align: center;

  top: 0;

  z-index: 1;

  overflow-y: auto;



  /* Menu size*/

  width: 6%;

}



#main {

  position: absolute;

  height: 100%;

  background-color: #856030;



  /* Hero page size*/

  margin-left: 6%;

  width: 94%;

}



.box {

  width: 100%;

  position: relative;

  height: 100%;

}



#sections {

  position: absolute;

  background-color: #347424;

}

  <div id="header"></div>



  <div id="main">

    <div class="box"></div>



    <div id="sections">

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sunt repudiandae unde doloremque eos sed

        dolorem sit quae totam impedit. Exercitationem ad alias quae ipsam, maxime molestias quibusdam fugit

        doloribus.

      </p>

    </div>

  </div>