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 Ryan B.
Ryan B.
3,236 Points

Why is my footer's content floating into the div above? I'm building a simple bio page and can use the help. Thanks!

The div above the footer is suppose to show the badges that link to the profile pages revealing the courses I completed. I want a footer at the bottom holding social media icons and contact info. My footer is not being acknowledged as a separate section. Any suggestions?

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="biopage.css">
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="BioPage.js"></script>

        <title>Bio-Resume</title>
    </head>

    <body>
        <div>
            <header class="first">
                <img src="IMG_0659.jpg" class="img-profile">
                    <h2 class="contactinfo">Ryan J. Bilello</h2>
                    <h3 class="contactinfo">Programmer</h3>
                    <h4 class="contactinfo">Tampa, Fl.</h4>
             </header>
        </div>

        <div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>  


        <div>
            <h1 id="myBackground">About</h1>
                <p>

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br><br>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br><br>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
            </p><br><br>
        </div>

        <div>
            <h1 id="Achievements">Personal Development</h1>
                <p class="logoPara">Click on logo for more information.</p><br><br>
            <div id="group1">
                <h3>TreeHouse</h3>
                    <a href="https://teamtreehouse.com/ryanbilello" ><img src="treehouse%202.png" class="logo"></a><br><br>
                <h3>Code Academy </h3>
                    <a href="https://www.codecademy.com/users/NoleCode/achievements"><img src="codeacademyFinal.png" class="logo"></a><br><br>
            </div>

            <div id="group2"> 
                <h3>Codeschool </h3>
                    <a href="https://www.codeschool.com/account/prizes"><img src="codeschool2.png" class="logo"></a><br><br>   
                <h3>Bootstrap Project</h3>
                    <a href="#"><img src="bootstrap%20.jpeg" class="logo"></a><br><br>
            </div>
        </div>

        <footer>
            <ul>
                <li><a href="#">Facebook<img src="facebook.png"></a></li>
                <li><a href="#">Twitter<img src=""></a></li>
                <li><a href="#">LinkedIn<img src=""></a></li>

            </ul>
        </footer>

    </body>

</html>

.logo{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.first{
    border-bottom: solid 2px;
    background-image: url(Rocky.Mountain.National.Park.original.3521.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.img-profile{
    display: block;
    width: 10%;
    height: 10%;
    border-radius: 20%;
    padding-top: 2%;
    margin: auto;

}

.contactinfo{
    text-align: center;
    line-height: 10px;
    color: aliceblue;
    }

.logoPara{
    text-align: center;
    font-style: italic;
    font-size: 20px;
    }

#myBackground{
    text-align: center;
}

#Achievements{
    text-align: center;
}

#group1{
    float: right;
    padding-top:5%;
    padding-right:25%;

}

#group2{
    float: left;
    padding-top:5%;
    padding-left: 25%;
}

h3{
    text-align: center;
}

ul{
    font-size: 25px;
    text-align: center;

  }


li {
    display:inline;

    }

a {
    text-decoration: none;
}

2 Answers

Jenny Veens
Jenny Veens
10,896 Points

Hi Ryan,

Because you're content (divs with the classes 'group1' and 'group2') are floated to the right and to the left, there is a gap in between them that the footer is floating up through.

To fix this, either make the total width of group1 and group2 total the width of their parent, or you can add the following css property to the footer element: clear: both;

Ryan B.
Ryan B.
3,236 Points

Spot on! Thanks Jenny, i appreciate your feedback.

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

if you really wanted it to always be at the bottom of the page, no matter what you could also use a postion:fixed and set the top corner to the height of the element. I didn't look at your code but as a separate (untested) example you could do something like this:

.footer {
     height:100px;
     position:fixed;
     bottom: 100px;
}
Jenny Veens
Jenny Veens
10,896 Points

Adding a fixed footer is a great idea! However, to get it to stick to the bottom of the page you'd want to set the bottom value to 0. Consider adding a margin-bottom to the main content of the site thats the same height of the footer to make sure it doesn't get stuck behind your brand new fixed footer!

Ryan B.
Ryan B.
3,236 Points

Thx jason!

Jason DeValadares
Jason DeValadares
7,190 Points

Ah Jenny schooled me lol yes, my code is incorrect - bottom: 0; lol

Jenny Veens
Jenny Veens
10,896 Points

As long as we all keep learning! :)

Ryan B.
Ryan B.
3,236 Points

Hi Jenny,

If you have a sec can you take a look at my recent forum question on form styling? Thanks in advance. : ) https://teamtreehouse.com/community/what-is-the-best-approach-for-styling-a-form