CSS questions about documentation project

HTML-CSS
#1

Hi there, two quick questions:

  1. I’m using float to keep the navigation on the left with flex on the non navigation content. For some reason when I apply position: fixed; to the navigation both get blended. What seems to be the problem?

  2. My #navbar li has a padding on the left side, but I can’t determine where it’s coming from. Any clues?

Lastly, I appreciate any feedback on this page. Thank you!

My code so far
https://codepen.io/arshia93/full/QWKaPNJ

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

#2
  1. That is how position: fixed works. It removes the element from normal document flow just like position: absolute. So the element will not interact with other elements on the page. You can give the main element the same amount of margin-left as the width of the nav.
  1. It is the default style on the <ul> element. It gets both margin and padding added by the browser styles by default.

BTW, you really do not need to use float for this.

#3

Hi @lasjorg, thanks for the help.

  1. I see, how would I fix this in this case?

What would you recommend if not float?

#4

You can just set the margin and padding on the ul as needed. Often times we just remove them by default and then later add whatever is needed.

ul {
  margin: 0;
  padding: 0;
}

Try removing the float and see what happens.

1 Like
#5

I thought the

html {
  margin: 0;
  padding: 0;
}

would have been applied to all elements including ul. Does it not apply to some elements?

How did the navbar align to the left in this case if not with float?

#6

no, to select all elements you need to use the *selector

* {

}
#7

You could have the navbar be in a fixed position all the way to the top and the left without floats.

The article that @lasjorg gave you should help.

#8

It’s currently aligned to the left with just the following:

#navbar {
    display: block;
    text-align: left;
    width: 20vw;
    position: fixed;
  }
  #main-doc {
    display: flex;
    flex-direction: column;
    margin-left: 20vw;
    width: 60%;
  }
}

It’s not clear to me what part of this code aligns the navigation to the left.

#9

So, I am sure the pros will have a much better answer than me but this is how I see it.

Html default styling is already to the left but when you added flexbox, flex-direction: column , and margin-left: 20vw; then it just pushed the rest of the content to the right of the nav bar.

That is why you are getting the navbar on the left and other content on the right.

Also, I don’t know if you need this here

   display: block;
    text-align: left;

When I deleted it nothing happened. So you might not need it. Plus I was under the impression that the nav element was already block level.

#10

Try removing position: fixed and see what happens.

Because the nav is position: fixed it will not contribute to the document flow. Its width will not push down any other content but just overlap it. So nav and main will always remain on the same line even if/when there is no room for both (they will just overlap each other).

1 Like
#11

Thanks @lasjorg!

CSS is still weird for me sometimes :laughing:

1 Like