Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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 McFarlane
Ryan McFarlane
14,844 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;
}

Thank you Ryan. I appreciate very much your answer.

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.

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.