Am working on a page layout with a fixed header area, and main content below it split between a sidebar/nav area and a main content area. So far all is good and everything lines up... if I add dummy content to force a scroll then my header stays at the top.

The idea is that the total content for both will be restricted to 80% or min 800px width ish, centered nicely in the window if it is bigger...

My problem is that for some reason when the window size is reduced below 800px width, although a scrollbar appears, the logo / sidebar area is shunted off screen to the left, outside what you can see with the scrollbar... in fact if shrunk enough even some of the main area which is scrollable is hidden off to the left.

...how do I stop this and force the content to remain on screen?

My code is:

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

#wrapHead {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  height: 80px;
  margin: 0;
  top: 0px;
  background-color: #333399;
  color: #ffffff;
}
.header {
  display: flex;
  width: 80%;
  min-width: 800px;
}

#wrapMain {
  width: 100%;
  /* position: fixed; */
  display: flex;
  justify-content: center;
  height: 100%;
  margin: 0;
  margin-top: 80px;
}
.main {
  display: flex;
  width: 80%;
  min-width: 800px;
}

.sideCol {
  width: 150px;
  min-width: 150px;
  background-color: #6666cc;
}

.mainCol {
  width: 100%;
  min-width: 650px;
  background-color: #9999ee;
}

<div id="wrapHead">
  <div class="header">

    <div class="sideCol">
      [LOGO]
    </div>
    <div class="mainCol">
      header/title  -->  [user/login]
    </div>

  </div>
</div>

<div id="wrapMain">
  <div class="main">

    <div class="sideCol">
      side nav
    </div>

    <div class="mainCol">
      main content
    </div>
    
  </div>
</div>

Am working on a page layout with a fixed header area, and main content below it split between a sidebar/nav area and a main content area. So far all is good and everything lines up... if I add dummy content to force a scroll then my header stays at the top.

The idea is that the total content for both will be restricted to 80% or min 800px width ish, centered nicely in the window if it is bigger...

My problem is that for some reason when the window size is reduced below 800px width, although a scrollbar appears, the logo / sidebar area is shunted off screen to the left, outside what you can see with the scrollbar... in fact if shrunk enough even some of the main area which is scrollable is hidden off to the left.

...how do I stop this and force the content to remain on screen?

My code is:

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

#wrapHead {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  height: 80px;
  margin: 0;
  top: 0px;
  background-color: #333399;
  color: #ffffff;
}
.header {
  display: flex;
  width: 80%;
  min-width: 800px;
}

#wrapMain {
  width: 100%;
  /* position: fixed; */
  display: flex;
  justify-content: center;
  height: 100%;
  margin: 0;
  margin-top: 80px;
}
.main {
  display: flex;
  width: 80%;
  min-width: 800px;
}

.sideCol {
  width: 150px;
  min-width: 150px;
  background-color: #6666cc;
}

.mainCol {
  width: 100%;
  min-width: 650px;
  background-color: #9999ee;
}

<div id="wrapHead">
  <div class="header">

    <div class="sideCol">
      [LOGO]
    </div>
    <div class="mainCol">
      header/title  -->  [user/login]
    </div>

  </div>
</div>

<div id="wrapMain">
  <div class="main">

    <div class="sideCol">
      side nav
    </div>

    <div class="mainCol">
      main content
    </div>
    
  </div>
</div>

• html
• css
• flexbox

• 1 Welcome to Stack overflow! I would look into using media queries – Austin Duling Commented Feb 5 at 20:15

2 Answers 2

Ok... knew I just neeeded more coffee: Solution with @media

Added to CSS:

@media (max-width: 817px) {
  .header {
    width: 100%;
    min-width:auto;
  }
  .main {
    width: 100%;
    min-width:auto;
  }
  .mainCol { min-width: auto; }
}

Zhis resets things so unwanted min widths etc, go away.

I also added:

@media (max-width: 649px) {
  #sideNav { display: none;}
}

to remove the side bar if the screen is very small...

There are the reason why your method does not work :

• about the scroll : the main content was scrolling because you commented the position: fixed section, so you should activate it, and maybe comment the height: 100% rule;
• the minimum width is 800px because you've set min-width: 150px; for .side-cols elements and min-width: 650px; for .mainCol elements ; considere using relative units or percent-based units to adapt to the context.

What I would do is to use horizontal elements, which have width-relative fixed spacing at right and left, the side column with a low width-relative value and the main column which expands with flex-grow like this :

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #333399;
}

#body-background {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  
  margin: 0px;
  padding: 0px;
  
  display: flex;
  flex-direction: column;
}

#header-background {
  height: 80px;
  background: #333399;
}

#main-background {
  flex-grow: 1; /* to take all the space left */
  background: #c3c3c3;
}

#main-container {
  position: fixed;
  top: 0px;
  left: 10vw;
  right: 10vw;
  bottom: 0px;
  width: 80%;
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

.container-section {
  display: flex;
  flex-direction: row;
}

#header {
  height: 80px;
}

#main {
/*  flex-grow: 1;*/ /* Would take the space left on the page */
}

.sideCol {
  width: 10vw;
  background: #6666cc;
}

.mainCol {
  flex-grow: 1;
  background: #9999ee;
}

<div id="body-background">
  <div id="header-background">
  </div>
  <div id="main-background">
  </div>
</div>

<div id="main-container">
  <div id="header" class="container-section">

    <div class="sideCol">
      [LOGO]
    </div>
    <div class="mainCol">
      header/title  -->  [user/login]
    </div>

  </div>

  <div id="main" class="container-section">

    <div class="sideCol">
      side nav
    </div>

    <div class="mainCol">
      main content
    </div>

  </div>
</div>

In brief, I have inserted one element for the background, and another for the content.

Hope it helps.