how to... make a sidebar!

[fairyrune]

hello everyone! i'm adding a nav bar to my site, but i'm wondering what the best way to do this would be...

so i'm using a main page div, centered, to make all my elements stay in the middle (the flex boxes, headers,etc). what i did with my previous layout was i made a larger flex box with 3 divs inside. say my sidebar wants a div to be 200px wide, and my middle div with all my content wants to be 900px wide. i'd have a div on the opposite side to the sidebar that's also 200px, and center the flexbox i'm using - which makes the middle bit with all the content stay in the centre of the page even with a sidebar!

hope that makes sense.

but is there a better way to do this? i want my content to remain exactly where it is, but with a navbar to the side of it, like this.

thanks in advance! i feel like there's something else i can do that would be simpler, but i'm not sure what!

[Dan Q]

What you've described sounds like a perfect way to do what you're aiming for.

An alternative might be a grid layout: this would mean that you didn't need the empty "left-hand side" mirror of the sidebar. E.g. assuming you have a <div class="container"> containing a <main> and an <aside> you could do something like this:

Code

.container {
  display: grid;
  grid-template: "unused center sidebar" / 200px 400px 200px;
}

main {
  grid-area: center;
}

aside {
  grid-area: sidebar;
}

This creates an 800px-wide container, reserving 200px for each of two sidebars (called "unused" and "sidebar") and 400px for the "center" column... but then it only attaches things to the "center"  and "sidebar" columns.

I did you a CodePen if that helps explain it.

The end result is basically the same as what you're talking about, though, so just do what makes you most-comfortable!

[Dan Q]

Oh, one more option for you if you either (a) don't care about responsive design or (b) are willing to write some media queries to handle mobiles: you could place the sidebar at an exact position using position: absolute.

E.g. with the same HTML, the CSS could be:

Code

.container {
  position: relative;
}

main {
  width: 400px;
}

aside {
  position: absolute;
  right: -200px;
  top: 0;
  width: 200px;
}

Here's how that works:

• It sets position: relative on the container so that any inner position: absolute is relative to the container
• Then it sets position: absolute on the sidebar element
• Finally, it uses a negative-offset for of right: -200px, which is the width of the sidebar but negative (you can made it a larger negative value to move the sidebar "away" from the main content)

I did you another CodePen.

Just another option to consider!

[Dan Q]

I gave my second suggestion a go with your website (screenshot attached). Here's how I did it:

I added <nav>this is your new nav!</nav> inside your <div class="flexbox">, right at the top.

Then I added this CSS:

Code

.flexbox {
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  right: -225px;
  width: 200px;
  background: #fff7;
  border: 2px solid #19e119;
  min-height: 400px;
  font-size: 24px;
}

[fairyrune]

i guess i was doing something right then that's good to know! i'll have a test myself with these options and see how it goes. i learn this kind of coding piecemeal as and when i need it, so i thought i might have missed something about how to optimise this.

thank you so much for your time and suggestions!