CSS Display & Positioning Exercise

Hello,
I’m having trouble getting ‘main’ pushed down from the top of the height of the #navbar as explained below. Please help. Thanks.

https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning
Created by: Pyllo

Oh no! You spent days creating this awesome blog static website but now your client wants the navigation bar fixed at the top of the screen. You only have a minute to sort it out before final presentation - what are you going to do? Your #navbar has the height of 100px exactly.

2

3

4

5
}

6

7
}

8

9

10

11

12

13

14

15

16

17

#navbar {

/* High z-index to ensure that #navbar is

always in front of other elements: */

z-index: 5;

/* CSS property ensuring #navbar always

stays in the same place even if the page is

scrolled: */

position: fixed;

}

main {

/* Ensure the remaining content doesn’t hide

behind the #navbar: */

overflow: scroll;

position: absolute;

top: 70px;

bottom: 0;

}

Run

Check answer

And now, how can you push <main> down from the top exactly the by the height value of the #navbar?

1/3

checks left

Next

Hi there,

I’m not quite sure what exercise you are referring to, but an issue with making <main> absolute, is that it will remove it from the flow of the document. In this case, you would want to set margin-top to be the height of the header.