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 Ceonn Bobst
Ceonn Bobst
1,294 Points

My footer does not stick with flexbox...

My footer is not sticking, and I am trying to do it through flexbox.

Here is my html: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="responsive.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <header class="main-header">
      <h1 class="name"><a href="index.html">Projekt</a></h1>
      <nav class="main-nav">
        <ul>
          <li class="home"><a href="index.html">Hem</a></li>
          <li class="connect"><a href="connect.html">Anslut</a></li>
          <li class="forum"><a href="forum.html">Forum</a></li>
          <li class="about"><a href="about.html">Om oss</a></li>
        </ul>
      </nav>
</header>

<div class="contianer">
<div class="main">
  <div class="item1">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="item2">
    <h3>Ipsum</h3>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<footer class="main-footer">
        <a href="http://twitter.com/" target="_blank"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016</p>
      </footer>
    </div>
  </body>
</html>

And here is my css: 

     * {
     box-sizing: border-box;
     }

    html {
    margin: 0px;
    height: 100vh;
    width: 100%;
    }  

    body {
    font-family: 'Avenir Next', 'Open Sans', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0px;
    }

    .container {
    display: flex;
    flex-direction: column;
    }

    .main{
    flex: 1;
    }

    .main-header,
    .main-nav {
    display: flex;
    }

    .main-header a{
    text-decoration: none;
    color: black;
    }

    .main-nav a {
    padding: 10px 15px;
    font-size: .95em;
    text-transform: uppercase;
    }

    .main-nav ul{
    list-style: none;
    }

    .main-nav a:hover{
    color: darkgray;
    }

    .name {
    font-size: 1.35em;
    margin: 0;
    align-items: flex-start;
    }

    .main-header {
    margin-bottom: 30px;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
    width: 100%;
    background-color: #CDD0D1;
    }


    .main-footer {
     padding: 2em 0;
     margin-top: 30px;
     text-align: center;
     width: 100%;
     border-top: 2px solid darkgray;
     background: #E6E4E4;
    }
    .social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    }

3 Answers

Rui Pires
PLUS
Rui Pires
Courses Plus Student 4,927 Points
Rui Pires
Rui Pires
Courses Plus Student 4,927 Points

Ceonn Bobst, i believe that your mistake is that you didn't close the <header> tag and open the <footer> tag. Well, it's not in your code above. Try fix that and see what come up. And why are you using the </div> in the end? If you don't open a <div> you don't close aswell. Hope this helps

Ceonn Bobst
Ceonn Bobst
1,294 Points

Thank you Rui Pires. I see now that my full html has not been included. I am trying to mark all my code with ''' but it is not including my divs. I have all divs presented in the css properly placed in the html, classes "container", "main", etc., exist. But I seem not to be able to showcase that here. I am very sure that it is my css that is messing it up, just know that all classes correctly exist in my html.

Thank you in advance!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Coenn, I helped you out a little bit with your forum markdown.

What you want to display code is to use backticks like one of these ` three times plus the langue name to display code.

Have a look at the Markdown Cheatsheet to learn more. :-)

Ceonn Bobst
Ceonn Bobst
1,294 Points
Ceonn Bobst
Ceonn Bobst
1,294 Points

Thank Jonathan. But I am still experiencing the issue with my footer.

Rui Pires
Rui Pires
Courses Plus Student 4,927 Points

Ceonn Bobst i think you misspell container on your html. And i would put the footer outside the container div. And did you tried to use vh measurement for height in the main-footer and social-icon as you did in the html and body selector on your css?

Ceonn Bobst
Ceonn Bobst
1,294 Points
Ceonn Bobst
Ceonn Bobst
1,294 Points

Yes it was misspelled, changed that now. But the footer is still not working.