I’m trying to set up a layout that is similar to the example provided by FCC, where the navbar is fixed to the left side of the page and the content is on the right. I can’t figure out how to align the content to the left. After adding a temporary color to the backgrounds it looks like there are three columns when I want only two columns. Can anyone help me figure out what the issue might be?
Link to codepen is below.
Hi, the reason for this is not the phantom middle column, as there is no middle column to begin with. What is happening is a quirk of position:fixed. items with fixed position are taken out of normal flow, that is to say, no matter what kind of display, flexbox or grid or default, will take fixed position items into account when positioning other elements.
Here if you play around with your columns a little bit you will see your navbar does not respond to changes at all, because it doesn’t think its part of the flexgrid. In fact due to a bit of a nesting issue, if your navbar is indeed in the document flow, it would be squeezed right with your .sections, as you made body into a grid, but both your navbar and your .sections are all in main.
So the browser essentially sees you make body into a grid, with only one child that is main and you make that occupy column 2, so column 1 is empty. This is also why if you remove the left:0; on your navbar it overlaps with your .sections.
Now is there anyway to overcome this? Not as far as I am aware. This is an intentional and conscious design choice. So My best bet is to use any of the following:
.sections with a left property equal to navbar width. (this one I am a fan because it does not take the .sections out of normal flow as well..sections with a float:right property. This takes the .sections out of normal flow as well and can cause issues if you want to place items below the .sections.Here is a sample of something that you may like: https://codepen.io/bill-ye/full/qBRyBNZ
Good luck 
Hi,
Thank you very much for such a clear explanation! I’m still not quite sure how to properly use grid and flex but I understood everything you mentioned and your example is exactly what I was trying to do.
The reason I put display: grid in the body was because I thought that everything in the body (that is, on the page) would become a child of the body’s grid. But I guess it doesn’t work that way.
Anyway, I will continue to work on it using the info you gave me.
Thanks again!
Hi again,
Could you help me once more with a small issue with the media query?
I’m trying to get the navbar to stay fixed to the top of the screen when the screen size is 700 px or less. It’s at the top but whenever I scroll down the content of the page rolls right over it.
Here’s the link to the code pen again:
ah, this is also an interesting thing about elements. By default, without you adding any kind of position property to any element, the browser renders the elements by allocating enough space for each. This makes the page appear 2D. But there is an extra dimension in there. If you think of the width as the x-axis, and height as y-axis, there is an additional z-axis perpendicular to your computer screen pointed straight at your face.
This only comes into play when you have changed the position property value, as with either relative, absolute,fixed,sticky the element now has a chance to overlap with other elements. So how does the browser know which element to place on top when two overlaps? It looks at this z-index property of each element.
Higher z-index means it is closer to you, the user, means it will be on top of elements with lower z-index value.
Here, because your navbar is position:fixed, that means when your other elements scroll over, the browser has to decide which one becomes covered by comparing z-index. To make the navbar appear on top, in your CSS selector, add z-index:1, or whatever number that makes it appear on top. That’s it!
Thank you once again! Adding the z-index worked like a charm, and with that I can finally submit this project!
You’ve been very helpful and it is much appreciated!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.