Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Milan Bogdanovic
Milan Bogdanovic
9,922 Points
Posted by Milan Bogdanovic
Milan Bogdanovic
9,922 Points

How to prevent a footer from going up while adding new content in it?

Hi, I am trying do design a footer similar to teamtreehouse. I want to have multiple links in it, displayed block and aligned horizontally. Problem is when i want to add new content such as social icons footer doesn't remains at the bottom, instead,it goes up. I was thinking is it allowed to have multiple divs in footer tag? Any help is appreciated, thanks. Here is my code: HTML

<footer>
      <div class="info">
            <ul class="o">
              <a href="#"><li>About us</li></a>
              <a href="#"><li>Payments</li></a>
              <a href="#"><li>Services</li></a>
              <a href="#"><li>Privacy policy</li></a>
            </ul>
        </div>
       <div class="social">
          Social icons are going here
       </div>

       <div class="newsletter">
            <input type="email" name="newsletter" placeholder="Subscribe to us">
       </div>
    </footer>

CSS

footer {
  margin-bottom: -50px;
  padding: 0;
  width: 100%;
  background-color: #448aff;
  height: 190px;
}


/*info div*/
.info{
  background-color:#2979ff;
  width: 200px;
  height: 160px;
  margin-left: 20px;
  border-radius: 5px;
  bottom: -20px;
  position: relative;
}

.o{
  height: 50px;
}
.o a{
  color: white;
  font-size: 0.5em;
  margin-left: -40px;
  display: block;
  font-weight: lighter;
}

2 Answers

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

I would add:

footer {
position: relative;
bottom: 0;
}

as well. It looks like you have it applied to a div internal to your footer, which doesn't do a whole lot from what I saw. It won't touch the very bottom (the blue won't) since you have the subscription opt-in at the very bottom below the footer.

I'm also confused by the .info div and a few other things, but those don't pertain to your question and I don't have the full context, so I won't address those.

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Milan,

I'm not sure if this is exactly what your problem is, but you might find this Treehouse video on Creating a Sticky Footer useful as it seems to be addressing what you are describing:

"If a page’s content is shorter than the height of the browser, the page may display a big, undesirable gap between the bottom of the viewport and the footer."

However, I'm not sure how far along you are in CSS so I should mention that this is just a little past the basics if you haven't gone through all of that yet.

Hope this helps.