Problem with Responsive Main Section & Floated Navbar

HTML-CSS
1

Hi guys, on my codepen link below I am wondering how to keep the main section text responsive when resizing the screen (down to 800px for example from full screen). I am getting a horizontal scrollbar, which then moves the main content over the navbar. Obviously I am looking to solve this and have racked my brains for several hours today to no avail. The navbar is fixed and the main section is positioned absolutely. I am missing a key aspect here about responsiveness regarding the two.

For example purposes, I am trying to recreate the responsiveness on the technical documentation page example:

Here is my snippet:

2

Add position relative to the body and then use max-width on #main-doc

body {
  position: relative;
  margin: 0; /* You may or may not want to remove the default margin on the body */
}

#main-doc {
  position: absolute;
  left: 350px;
  top: 50px;
  /* width: 70%; */
  max-width: 70%;
}
3

Thanks for your reply, I appreciate that. For some reason I still cannot get it to work on my actual technical documentation codepen:

Although it did work in the code snippet in my original post. I’m also struggling with containing some of the code tags when resizing the browser window and i’m thinking this could be causing my initial problem? I’ve conquered the code blocks, it’s the single liners that i’m struggling with. I have tried various things but nothing worked correctly.

4

Hide the overflow on the body, then set the width on main using a calc 100% - nav width + a little extra. Then I would also move the max-width to the sections and center them with margin auto.

body{
  position: relative;
  overflow-x: hidden;
}

#main-doc{
  position: absolute;
  left: 350px;
  top: 50px;
  width: calc(100% - 360px);
}

section {
  max-width: 90%;
  margin: 0 auto;
}
1 Like
5

Brilliant knowledge, thank you.