Display and Positioning / Broadway / Problem with fixed Footer

Hi there,

I’m having some trouble with one task of the following exercise:

https://www.codecademy.com/courses/learn-css-display-positioning/projects/broadway-design?course_redirect=learn-css

In Task 10 it says:

" If you want to continue coding, challenge yourself to make the <footer> element also fixed to the bottom of the page regardless of scrolling."

I’ve tried a few approaches so far and googled it but couldn’t find a solution. The main issue is once <footer> has been set to position: fixed; it completely disappears! Could anyone give me a hint what’s the problem? :slight_smile:

Here’s the css code:

html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333333;
  position: fixed;
  width: 100%;
  z-index: 1;
  text-align: center;
}

nav {
  margin: 0;
  padding: 20px 0;
}

nav li {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  width: 80px;
}

main {
  text-align: center;
  position: relative;
  top: 80px;
}

main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0px;
  padding-top: 80px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
}

footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

.jumbotron {
  height: 800px;
  background-image: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  margin-bottom: 20px;      
}

.supporting {
  padding-top: 140px;
  padding-bottom: 100px;
}

.supporting .col {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  display: inline-block;
  width: 200px;
  height: 200px;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.supporting a {
  background-color: white;
  color: #333333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #333333; 
}

@media (max-width: 500px) {
  main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

Sorry if this is posted in the wrong category, it’s my first post and I wasn’t sure were exactly to do it.

Cheers,

Steve

4 Likes

the problem with position: fixed (and absolute) is that they are taken out of normal document flow, so they don’t inherit a width any more, you have to specify the width, otherwise width becomes zero, making the footer look like its vanishing

or it could be hiding behind another element?

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
  width: 100%;
  z-index: 10;
}

It wasn’t in the code I previuosly posted but I tried it with a specified width and a high z-index (see code above) but nothing seems to work…

1 Like

Can you also post your html code? Then i can have a look. Or can i use the default html code in the lesson/project?

edit: the footer is present on the page, but its below the visible content (too far down on the page) (use inspector), you will have to apply some css magic to bring it into view

You can use the default code of the project, didn’t change it. :slight_smile:

I just started with css, so my magic is already exhausted, hehe

i used bottom: 0, that seemed to do the trick

18 Likes

Thank you very much, it works indeed!

Great question @trvepeak, and thank you for the responses as well @stetim94 :slightly_smiling_face:

I am curious though what specifically would cause the entire <footer> element to effectively drop off the bottom of the page like this. If we consider the footer position as fixed (versus static), what is actually causing it to disappear? Is this due to the fact that the <footer> element, much like the <header> and <div> elements do not actually inform the browser of any defined structure (like a <p> or <h#> tag does)?

I ran into a similar problem in a lesson earlier in this string of lessons which prompted me to wonder the exact same thing as to why these specific elements do not seem to want to play nicely with the inline elements.

1 Like

if you use the inspector, you can see that the footer is so far down the page, you can’t see it. Have you learned to use the inspector? Quite useful, especially for this kind of task

Yes, I can see that the element still exists but is being pushed off the edge of the browser’s visible area, but the question remains what causes the browser to display it in this way?

As best I can tell, any such element that exists in the HTML should appear unless explicitly told not to through the styles, and in this case the footer is not being explicitly hidden. Fixing an elements position doesn’t automatically hide it in any other instance we’ve seen so far, and it seems programmatically inappropriate to behave in this way unless there is something particular about the <footer> element we have yet to discover.

Honestly? no idea. Html is just a mark-up language, who knows how the graphical rendering goes under the hood.

I’d also like an explanation for why this is happening. No other lesson in the CSS module has flummoxed me like this one. Even after reading all the replies here (and applying the fix of bottom: 0;), I don’t understand why this was a problem to begin with.

Why did the footer vanish and the not the header?

Why did bottom: 0; fix this issue? Did it set an artificial floor of some kind to the page, thus preventing the element from disappearing into the abyss?

2 Likes

will_hm i was wondering exactly the same, im happy because that solve it but… why in the first place the error occurred and why did this “trick” solve it ? i hope someone answer soon.

ok, hear this… ibelieve that when you change position to fixed, footer moved to the begining of the document, dont know why… but if u set an ofset value for example top: 10px what this does is that places the footer 10px away from top… if u place top: 200px it will place the footer 200px away from the top of the document, when u place bottom: 0; u ar displacing the footer 0px from the botom of the document… so, it magically apeared lol… well, i found this while i was playing around with the css, its not a very cientific explanation but now i know a little better the nature of this “bottom: 0;” rule

3 Likes

I don’t know if I am right, but I think it may be because the element is now being ‘drawn’, beginning from it’s top left hand corner (x, y = 0), at a fixed position at the bottom of the page. Then it is ‘drawn’ horizontally and vertically, but out of sight.

When you set ‘bottom: 0;’, you force the element to make sure that the very bottom horizontal position of the element is no lower than the x = 0 position on the page / the bottom of the page. Effectively, it now ‘rises’ out.

Sorry if that was terribly explained. I might also be wrong!

This is what MDN Web Docs say about the fixed position:

" Fixed positioning is similar to absolute positioning, with the exception that the element’s containing block is the initial containing block established by the viewport"

In other words, the position is determined by its place in the HTML DOM. The footer at the bottom in the HTML, so is placed after all previous elements take their positions. But now viewport height is calculated without it. So the body ends before the footer is able to be displayed.

This is why the header shows up on top of the screen after applying a fixed position to it. It’s the first element in the DOM so it ends up floating in its original position.

1 Like

Hi!

I didn’t see any explanation on why bottom: 0; fixes the issue, but this is what I found on MDN Web Docs after searching for the “bottom” property:

The effect of bottom depends on how the element is positioned (i.e., the value of the position property):

  • When position is set to absolute or fixed , the bottom property specifies the distance between the element’s bottom edge and the bottom edge of its containing block.

So that’s why the footer ends up where we want it in this project if we use bottom: 0;. If anyone else was still confused, I hope this explains it!

and try and add width 100%