How to have floating side-menu above different colored divs with a max-width-CodePudding

I've been struggling with a layout I initially imagined, even if I knew the execution was going to be tricky ! For my main content, I have several divs and each div represents a full-viewport colored frame with different texts/images. On the left, the goal is to have a sticky side-bar menu for the duration of the main content(see image). The whole section is ideally centered.

goal as designed : floating menu over different colored sections

The main problem is placing the two sides within a certain max-width (or to have the same margins as my site that has a max-width of 1100px for content), and correctly centering/spacing the right-hand content in regards to the sidemenu.

Because each frame changes color, I can't have a two-column layout (with one side the menu, and the other side the changing content) and I also can't put a max-width on the general parent container of both the sidemenu and content main section because of that. When I try to play around with padding by adding a class to each frame, the menu (which is currently floated left), moves.

A segment of my code to illustrate :

body {
  margin: 0;
}
*, ::before, ::after {
    box-sizing: border-box;
}
.frame {
    min-height: 100vh;
    min-width: 100vw;
    padding-top: 20px;
}
.bg-o {
    background: orange;
}
.bg-do {
    background: darkorange;
}

/* sidebar */
 
.side-wrapper {
    min-height: 100vh;
}
.sidebar-container {
  position: sticky;
  top: 0px;
  float: left;
  margin-top: 0;
  margin-left: 140px;
  height: 100%;
}
.sidebar {
  border-right: 2px solid white;
  margin-top: 50%;
  padding: 40px 20px;
}

.sidebar-title {
  color: white;
  font-family: 'Asul';
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
}
.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-type: none;
  padding: 0;
}
.btn-wh-sm {
  background-color: transparent;
  border:  2px solid white;
  width: 170px;
  height: 40px;
  border-radius: 20px;
  padding: 8px 30px 10px 30px;
  text-align: center;
}
.btn-wh-sm a {
  font-size: 1.2em;
  color: white;
  text-decoration: none;
  
}

<section>
    <aside >
        <div >
            <h5 >les étapes</h5>
            <nav id="side-nav">
                <ul >
                    <li ><a href="#">brief</a></li>
                    <li ><a href="#">recherche</a>
                    <li ><a href="#">contenu</a></li>
                    <li ><a href="#">wireframes</a></li>
                    <li ><a href="#">maquettes</a></li>
                    <li ><a href="#">code</a></li>
                    <li ><a href="#">tests</a></li>
                </ul>
            </nav>
        </div>
    </aside>
    <main >
        <div >
            <div >
                <div>
                    <p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système de garde. Après leur diplôme, ils ont donc décider de lancer Homiz</p>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …). Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
                </div>
            </div>
        </div>
    </main>
</section>

Link to codepen: https://codepen.io/annesovax/pen/LYmEREy

I hope I was clear enough on my intentions. Any help would be deeply appreciated, I still have a lot to learn and I haven't found anything that could point me in the right direction when it comes to this sort of layout ! Thanks a ton !

CodePudding user response：

Hi and welcome to stack overflow. What I've done is essentially wrap your main content in a class called 'frame' with a margin-left of 240px and positioned your sidebar as fixed and set the height to 80vh rather than 100% which was causing it to scroll slightly. Since the example you gave has the white line not extending to right to the base of the display this looks okay.

If you want to make the frame width a bit more dynamic then you'd have to set the margin at the window.onload event by taking the width of the sidebar using the getClientBoundingRect() function.

I've also tidied your css up a bit.

Hope this helps.

body {
  margin: 0;
}

*,
 ::before,
 ::after {
  box-sizing: border-box;
}

.frame {
  min-height: 100vh;
  padding-top: 20px;
  margin-left: 250px;
}

.bg-o {
  background: orange;
}

.bg-do {
  background: darkorange;
}


/* sidebar */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 40px;
  margin-bottom: 40px;
  border-right: 2px solid white;
  padding: 0px 30px;
  height: 90vh;
}

.sidebar-title {
  color: white;
  font-family: 'Asul';
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
}

.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-type: none;
  padding: 0;
}

.btn-wh-sm {
  border: 2px solid white;
  width: 170px;
  height: 40px;
  border-radius: 20px;
  padding: 8px 30px 10px 30px;
  text-align: center;
}

.btn-wh-sm a {
  font-size: 1.2em;
  color: white;
  text-decoration: none;
}

<div >
  <h5 >les étapes</h5>
  <nav id="side-nav">
    <ul >
      <li ><a href="#">brief</a></li>
      <li ><a href="#">recherche</a>
        <li ><a href="#">contenu</a></li>
        <li ><a href="#">wireframes</a></li>
        <li ><a href="#">maquettes</a></li>
        <li ><a href="#">code</a></li>
        <li ><a href="#">tests</a></li>
    </ul>
  </nav>
</div>
<div >
  <div >
    <p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système
      de garde. Après leur diplôme, ils ont donc décider de lancer Homiz
    </p>
  </div>
</div>
<div >
  <div >
    <p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents
      sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …).
      Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
  </div>
</div>

CodePudding user response：

You can get the two columns (aside and main) by using flex on the whole section.

You can get the 'extended' background-colors by putting them onto before pseudo elements of the frames, positioned so they extend right across to the left and underneath everything else.

You'll want to adjust padding and so on to be exactly what you want but this snippet has the basic ideas, and it is responsive (adjusting to the width of the viewport and to the width of the menu). You may want to think about what to do when the menu needs a lot of the viewport width or morethan the viewport height but that's a different question.

body {
  margin: 0;
}
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
}
section {
  display: flex;
}
.frame {
    min-height: 100vh;
    padding-top: 20px;
    position: relative;
    overflow: none;
}
.frame::before {
    content: '';
    background-color: inherit;
    position: absolute;
    top: 0;
    right: 0%;
    height: 100%;
    width: 100vw;
    z-index: -2;
}
.bg-o {
    background: orange;
}
.bg-do {
    background: darkorange;
}

/* sidebar */
 
.side-wrapper {
    min-height: 100vh;
}
.sidebar-container {
  position: sticky;
  top: 0px;
  margin-top: 0;
  margin-left: 140px;
  height: 100%;
}
.sidebar {
  border-right: 2px solid white;
  margin-top: 50%;
  padding: 40px 20px;
}

.sidebar-title {
  color: white;
  font-family: 'Asul';
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
}
.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-type: none;
  padding: 0;
}
.btn-wh-sm {
  background-color: transparent;
  border:  2px solid white;
  width: 170px;
  height: 40px;
  border-radius: 20px;
  padding: 8px 30px 10px 30px;
  text-align: center;
}
.btn-wh-sm a {
  font-size: 1.2em;
  color: white;
  text-decoration: none;
  
}

<section>
    <aside >
        <div >
            <h5 >les étapes</h5>
            <nav id="side-nav">
                <ul >
                    <li ><a href="#">brief</a></li>
                    <li ><a href="#">recherche</a>
                    <li ><a href="#">contenu</a></li>
                    <li ><a href="#">wireframes</a></li>
                    <li ><a href="#">maquettes</a></li>
                    <li ><a href="#">code</a></li>
                    <li ><a href="#">tests</a></li>
                </ul>
            </nav>
        </div>
    </aside>
    <main>
        <div >
                    <p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système de garde. Après leur diplôme, ils ont donc décider de lancer Homiz</p>
        </div>
        <div >
                    <p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …). Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
        </div>
    </main>
</section>