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

Posted by Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

Sticky footer

Hello!

Can someone check this code below? I have two issues, first, my .clearfix does not clear anything...

I am using the following class on the parent elements

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

An example of the code is:

  <body>
  <div class="wrap">
    <header class="main-header clearfix">
          <img class="logo" src="logo.png" height="84px" alt="Company logo"
        <ul class="main-nav">
          <li class="items"><a href="#">About us</a></li>
          <li class="items"><a href="#">Location</a></li>
          <li class="items"><a href="#">Services</a></li>
          <li class="items"><a href="#">Contact</a></li>
        </ul>
   </header>

  <div class="main-picture clearfix">
    <p><strong>A pet&#39;s love never fails.</strong> No matter what, the animal that you have bonded
      with will always love you and remember you. Even if you cannot return that unconditional love,
      just knowing that it is there will make your life better.</p>
  </div>

</div>
  <footer class="footer clearfix">
      <p><small>Copyright 2020, Design by Silvia Ramos</small></p>
      <a href="#top"><img src="images/arrow.png" height="16px" alt="Arrow top"</a>

</footer>
  </body>

I have no issues with the header, however the foot keeps on floating over the the paragraph i have under .main-picture.

I also tried to kind of resolve this by creating a sticky footer and it does not do anything... I have calculated the height of the footer, which is 53.50px so I used this function:

.wrap {
  min-height: calc(100vh – 53.5px);
}

I did wrap all my code (except the footer) on a div the class 'wrap'.

I didn't do this on the workspaces so not sure if someone would be able to check this code without me having to pass all over the workspaces?

Thank you

1 Answer

Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 Points

Hi Silvia, I tinkered with your code for awhile to try to figure out what was going on. First, your <img> tags are not closed, so be sure to add the > to close those tag.

Also, it is best practice to add a <nav></nav> around your unordered list.

I don't believe you need to add clearfix in this exercise as you aren't floating anything. In any case, I removed it.

I didn't have the images you included, but even so I was able to use the Chrome Dev tools to inspect how big the footer is. You have to take into account the margins that are added around the <p> either by you or the user agent (what Chrome adds). I had to futz with a bit but I ended up getting the footer to stick with no scrolling with the following:

.wrap { min-height: calc(100vh - 90px); }

With your code and your images it might be a different number though.

Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

Hi!

Thank you so much! I have the bad habit of leaving images opened :( I noticed this several times. Thank you again for checking and your advises, much appreciated :)))