Project help needed

HTML-CSS
1

I am doing the documentation page . And unfortunately my #left-div element is not positioned at the top when the size of the screen is 800px. What have I done wrong here. Please help.

Thanks.
https://codepen.io/Samuelrose/pen/mKaMGR?editors=1100

2

the link provided does not work

1 Like
3

Hey @SamuelRose, please fix the link of your project, so we can see the code and help you.

4

Sorry I have fixed the link now.

1 Like
6

Hey @SamuelRose,

I looked into your code.

On the media query part, change the position to absolute or fixed (if you want it to stack on top when scroll) for the #left-up selector, like this:

@media screen and (max-width: 800px){
  #left-up{
    position: absolute; //or fixed
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }

So the element positioning is relative to his parent element, that is the main element, that you gave him the position: relative.

Then, after you change the #left-up slector to position: absolute or fixed, make your adjustments for the element on the CSS.

Good luck :wink:

EDIT:
@SamuelRose, the position property is good for other things than for layout the entire webpage.
Personally I dont like to use the position property for layout the entire page.
Using floats instead, is a better and comfortable way to layout a webpage.

Try this on your css:

// remove the postion property and  instead give it float: left and remove the offset propertys (top and left)
#left-up{
  // position: fixed;
  // top: 0;
  // left: 0;
  float: left;
  width: 30%;
  height: 100%;
  border-right: 4px solid #c9c9c9;
 }

// here remove the  margin-top: 20%; 
nav{
  // margin-top: 20%;
  overflow-y: scroll;
  height: 100%;
}

Then make your adjustments on the CSS.

7

thnx @ItamarRosenblum it helped me a lot

1 Like
8

Happy to help @SamuelRose :slight_smile: best of luck mate