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

HTML

Posted by Philip Ollas
Philip Ollas
5,705 Points

Footer stuck to fixed header

Hi, I don't know if I have been sloppy or am I just lacking the skills to solve this. The problem that I'm facing is that my footer is stuck to the header and just can get it adjusted so that it would be at the bottom. I've looked many times on the css and html to try to see what's the problem and even spent many hours trying to fix it....but I just can't get it done. Could somebody PLEASE solve this for me???

Here is the HTML code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Gartman Mechanical Services</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

      <header class="main-header"> 
      <ul>
        <li><a>Home</a></li>
        <li><a>About Us</a></li>
        <li><a>Residential Services</a>
          <ul>
            <li><a>Heating</a></li>
            <li><a>Cooling</a></li>
            <li><a>Plumbing</a></li>
            <li><a>Air conditioning</a></li>
            <li><a>Hot water heat</a></li>
            <li><a>Water heaters</a></li>
          </ul>
        </li>
        <li><a>Commercial Services</a>
          <ul>
            <li><a>Engineering Services</a></li>
            <li><a>Refrigeration</a></li>
            <li><a>Heating systems</a></li>
            <li><a>Air conditioning</a></li>
            <li><a>Ventilation</a></li>
            <li><a>Boiler and steam updates</a></li>
            <li><a>Sheet metal fabrication and installation</a></li>
            <li><a>Plumbing and piping systems</a></li>
            <li><a>Humidification and dehumidification</a></li>
            <li><a>Air filtration</a></li>
          </ul>

        </li>
        <li><a>Testimonials</a></li>
        <li><a>Contact</a></li>

      </ul>
     </header> 



  <span>
  <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/pages/Gartman-Mechanical-Services"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a></span>


    <footer class="main-footer">
      <p>520 South Park Ave.<br> Oshkosh, WI 54902<br>
        <a href="tel: (920) 231-5530">(920) 231-5530  </a>
        <a>&copy;Designed by Philip Ollas.</a>

    </footer>

</body>

</html>

* {
    box-sizing: border-box;
}

body{   
  background-size: cover;
  font-family: Arial;
  color:white;
  background: url('../img/gmsplumbing.jpg') no-repeat;
}


ul{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul li{
  float: left;
  width: 200px;
  height: 40px;
  background-color:#b5b9c2;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin: 2px;
}



ul li a{
  text-decoration: none;
  color:white;
  display: block;
}

ul li a:hover{
  background-color:black;
}

ul li ul li{
  display: none;
}

ul li:hover ul li{
  display: block;
}

.main-header {
position: fixed;
top: 0;
left: 0;
}

.main-footer{
  text-align: center;
  background: #b5b9c2;
    padding: 2em 0;
    margin-top: 30px;
}

.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
  float:right;
  display:block;
  background-image:url('../img/twitter.png');
  background-image:url('../img/facebook.png');
}

/*  .clearfix::after {
        content: " ";
        display:block;
        clear: both;
    }

    .container{
  width: 80%;
  max-width: 1150px;
}/* <div class="container clearfix">*/



    @media (min-width: 769px) {

.container{
  width: 90%;
  margin: 0 auto;
}
}
´´´

2 Answers

Ryan M
Ryan M
16,203 Points
Ryan M
Ryan M
16,203 Points

The best way to keep a footer at the bottom of the viewport regardless of how much content is on the page is with flex.

<div class="wrap">
    <header></header>
    <div id="content">
        <main></main>
        <aside></aside>
    </div>
    <footer></footer>
</div>

.wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wrap footer {
    margin-top: auto;
}
Philip Ollas
Philip Ollas
5,705 Points

Thank you Ryan. I appreciate very much your answer.

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello, Philip again! But if without flex, you can do it like below. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Gartman Mechanical Services</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="wrapper"> <!-- Don't remove, it push your footer -->

    <header class="main-header">

        <ul id="navigation">
        <li><a>Home</a></li>
        <li><a>About Us</a></li>
        <li><a>Residential Services</a>
          <ul>
            <li><a>Heating</a></li>
            <li><a>Cooling</a></li>
            <li><a>Plumbing</a></li>
            <li><a>Air conditioning</a></li>
            <li><a>Hot water heat</a></li>
            <li><a>Water heaters</a></li>
          </ul>
        </li>
        <li><a>Commercial Services</a>
          <ul>
            <li><a>Engineering Services</a></li>
            <li><a>Refrigeration</a></li>
            <li><a>Heating systems</a></li>
            <li><a>Air conditioning</a></li>
            <li><a>Ventilation</a></li>
            <li><a>Boiler and steam updates</a></li>
            <li><a>Sheet metal fabrication and installation</a></li>
            <li><a>Plumbing and piping systems</a></li>
            <li><a>Humidification and dehumidification</a></li>
            <li><a>Air filtration</a></li>
          </ul>

        </li>
        <li><a>Testimonials</a></li>
        <li><a>Contact</a></li>

      </ul>

    </header><!-- .header-->

    <main class="container">


<!-- Here you content, add some margin or padding, so your fixed header didn't overflow your content below!!!! --> 



    </main><!-- end .content -->

</div><!-- .wrapper end needed for footer at the bottom-->




<footer class="main-footer">
<span>
  <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/pages/Gartman-Mechanical-Services"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a></span>

    <p>520 South Park Ave.<br> Oshkosh, WI 54902<br>
        <a href="tel: (920) 231-5530">(920) 231-5530  </a>
        <a>&copy;Designed by Philip Ollas.</a>
</footer><!-- .footer -->

</body>
</html>

CSS 


/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */


html {
    height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
body {
    background-size: cover;
    font-family: Arial;
    color:white;
    background: url('../img/gmsplumbing.jpg') no-repeat;
    height: 100%;
}
.wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
}


.main-footer {
    width: 100%;
    margin: -120px auto 0;
    height: 120px;
    position: relative;
    text-align: center;
    background: #b5b9c2;
    padding: 2em 0;

}



// your styles from old file, body up //

* {
    box-sizing: border-box;
}


ul{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul li{
  float: left;
  width: 200px;
  height: 40px;
  background-color:#b5b9c2;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin: 2px;
}



ul li a{
  text-decoration: none;
  color:white;
  display: block;
}

ul li a:hover{
  background-color:black;
}

ul li ul li{
  display: none;
}

ul li:hover ul li{
  display: block;
}

.main-header {
position: fixed;
top: 0;
left: 0;
}


.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
  float:right;
  display:block;
  background-image:url('../img/twitter.png');
  background-image:url('../img/facebook.png');
}

@media (min-width: 769px) {

.container{
  width: 90%;
  margin: 0 auto;
}
}

Mention that you fixed your header to the left top corner, so it is not in the middle.

Philip Ollas
Philip Ollas
5,705 Points

Well hello there Evgeniia, I'm happy that you commented since I were thinking of asking you this question personally but I couldn't find your contact details . Nice will definitely try that out and I've noticed that I should take more notes as I go along the courses. Never the less I also appreciate your answer and effort....happy coding.