Trying to understand the layout of Technical Documentation Project example

1

I’m working on the Technical Documentation Page project, specifically trying to figure out how to set the layout so the navbar remains on the left side of the screen. FCC gives this pen as an example:

https://codepen.io/El_Escandalo/pen/PoYxWMd?editors=1100

FCC also made this video as a guide, which employs CSS grid for the layout (at the 16:05 point in the video).

But the example pen does not seem to use the grid. It seems to me the two examples are using different methods. I realize there are many ways to layout a page, I’m just trying to understand one of them to start with.

How is the example pen (the one not using the grid) being laid out? I’m not concerned right now with the more “detail” stylings such as padding etc.- just trying to figure out what CSS is making the navbar remain on the left, and main section on the right. I made the navbar fixed and tried to make the main section relative to it, but it doesn’t push the main section to the side of the navbar… Thank you

2

For the CodePen:
The main CSS affecting the navbar is:

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

position: fixed;
Causes the navbar to be fixed to the defined area of the window.
top: 0px; left: 0px; Tells the navbar to be positioned at those co-ordinates of the page.

That is all there is to it. Just make sure your html is layed out correctly, and the additional elements should line up.

Perhaps, make sure you have defined the width and height properties of your main section.

1 Like
3

@Sky020 What is the difference between the window and the page?

4

The page is your whole HTML that is loaded on the site. Your window is defined by your browser. Usually, the page is longer than your window.

Unless position is fixed, the DOM are fixed to the page, not the window.

1 Like
5

@Sky020 Thanks. Ok, so theoretically if I zoomed the window out, then I could see the whole page? But at normal zoom, if there is lots of content, a window won’t be entirely visible on the page?

So in this sense, does the fixed attribute differ from absolute and relative in that it is positioned in relation to the window rather than the page? Thank you

6

Yes, that is correct.

1 Like