The fixed position isn't working, making header disappear instead


#1

So in the course "Build a Resume", more precisely in the "Fixing your Header" section.
https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/4?curriculum_id=50579fb998b470000202dc8b

I put the code correctly as instructed. I click Save & Submit and I am congratulated and invited to go to the next section, so I suppose the code is correctly written indeed.

But still, the header isn't fixed. It's actually gone. Here is a screenshot attached.


#header {
    position: fixed;
    z-index: 1;
    border-radius: 5px;
    height: 50px;
    width: auto;
    background-color: #abc111;
    margin-bottom: 5px;
}

.left {
    border-radius: 5px;
    height: 400px;
    width: 24%;
    background-color: #482f56;
}

.right {
    border-radius: 5px;
    height: 400px;
    width: 75%;
    background-color: orange;
    float: right;
}

#footer {
    border-radius: 5px;
    height: 100px;
    width: auto;
    background-color: #ef8458;
    margin-top: 5px;
}

#2

a div normally takes the full width of the given space, this is not the case with position fixed (since it is taken out of flow), you want to give your div a width


#3

Still, a good header is one that will stretch to all the page/screen, but if we position: fixed it, how can we make so? If I give it a witdh it will vary across screens. So the only way to do this so far to me is giving it a width: 100%, but I still want my header to appear on top of .left and .right divs in this screenshot and be fixed when scrolling down, like this:

But right now (and I can't show it because I am not allowed more than one image here), the header already appears over .left and .right divs at the top of the page, I would rather see it on top of them and then over them once we are scrolling down the page.


#4

Would the only way be to manually set top-margins of .left and .right divs consequential to leave space for the fixed header as desired?


#5

you really need to float your .left to the left and clear your #footer, codecademy might forgive you for it, but not outside of codecademy

Like i said, fixed position takes the element out of flow, so is ignored when rendering the other div's, you need to push your .left and .right down, you can use margin-top


#6

Yup ok cool, thank you very much for this prompt help!

One last little thing, my header works all fine now except for this little overstretching past the right end of the page? Like this:

Tried to fix float: or other code but no effect? Here's my code:

#header {
    position: fixed;
    z-index: 1;
    border-radius: 5px;
    height: 50px;
    width: 100%;
    background-color: #abc111;
    margin-bottom: 5px;
}

.left {
    border-radius: 5px;
    height: 400px;
    width: 24%;
    background-color: #482f56;
    float: left;
    margin-bottom: 5px;
    margin-top: 55px;
}

.right {
    border-radius: 5px;
    height: 400px;
    width: 75%;
    background-color: orange;
    float: right;
    margin-bottom: 5px;
    margin-top: 55px;
}

#footer {
    border-radius: 5px;
    height: 100px;
    width: auto;
    background-color: #ef8458;
    margin-top: 5px;
    clear: both;
}

#7

float doesn't work on fixed elements. No, the problem is that your body has a margin by default, and a fixed element will ignore this at the right side. The easiest solution is to remove body's margin:

body { margin: 0;}

one more useful thing:

div { box-sizing: border-box }

this will make padding and border part of the width and height of an element, rather then expanding it. Super useful


#8

Awesome, big thanks again!