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 Jason Ladieu
Jason Ladieu
10,635 Points

Problem preventing footer from overlapping above elements

I have my footer sticking to the bottom of my page, and adjusting to the page accordingly. I can't seem to keep it from overlapping the other elements above it. I'll post most of my code incase I missed something. Thank you for the help everyone!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Square Water Proofing</title>
        <link rel="stylesheet" href="css/main.css">
        <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <div class="container">
        <header>
            <a href="index.html" id="logo" class="title">
                <h1>Square Water Proofing</h1>
            </a>
            <nav>
                <ul>
                    <li><a href="our_story.html" class="nav-key">Our Story</a></li>
                    <li><a href="services.html" class="nav-key">Services</a></li>
                    <li><a href="beforeafter.html" class="nav-key">Before & After</a></li>
                    <li><a href="contact.html" class="nav-key">Contact Us</a></li>
                </ul>
                <section class="call-us">
                <h2>Call us today!<a href=tel="617-416-9403" class="tel">(617) 416-9403</a></h2>
                </section>
            </nav>
        </header>    
    <div class="column">
        <section id="primary" class="our-story-div">
            <h3>Our Story</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. 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>
        </section>
        <section id="secondary" class="our-story-div">
            <h3>Why Work with us?</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. 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>
        </section>
    </div>
    <div id="socialmedia">
      <footer id="footer">
        <a href="facebook.com"><img src="images/facebook.png" alt="Facbook" class="socialmedia"></a>
        <a href="instagram.com"><img src="images/instagram.png" alt="Instagram" class="socialmedia"></a>
        <h4><a href="http://jasonladieu.com" id="copyright">&copy; 2016 Jason Ladieu</a></h4>
      </footer>
    </div>    
    </div>
    </body>
</html>

/**********************
***Body***********/

html {
    background: linear-gradient(#DCDCDC, white);
    font-family: 'Libre Baskerville', serif;
    height: 100%;
    box-sizing: border-box;



}

body {
    width: 90%;
    margin: 0 5% 0 5%;

}


/**********************
***Header***********/

.title:link {
    color:#FFFF00 ;
    text-decoration: none;
}

.title:visited {
    color: #FFFF00;
}


.title:hover {
    color: black;
}

.title:active {
    font-weight: 800
}


h1 {
    width: 100%;
    text-align: center;
    font-size: 50px;
    text-shadow: 2px 2px black;
    width: 90%;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 10px;
}



/**********************
***Navigation***********/


.nav-key:link {
    text-decoration: none;
    color: black;
}

.nav-key:visited {
    color:black;

}

.nav-key:hover {
    color: black;
    font-weight: 600;
}

.nav-key:active {
    color: #FFFF00;
}


nav {
    text-align: center; 
    font-size: 25px;
}

nav ul {
    padding-bottom: 30px;
    margin: auto;
    text-decoration: none;

}

nav ul li {
    display: inline;
    padding-right: 25px;
    text-shadow: 2px 2px silver;
    text-align: center;
    margin: 0 auto;

}

.call-us {
    margin: 0 auto;
    width: 100%;
    border-top-style: solid;
    border-top: thick double ;
    border-bottom: thick double;
    margin-top: -15px;
    font-size: 13px;
    line-height: 7px;
    padding-bottom: -20px;
    padding-top: -50px;

}

.tel {
    color: forestgreen;
    text-shadow: 1px 1px gray;
    padding-left: 10px;
}


/**********************
***Our_story***********/

.column {
   text-align: center;
    font-size:0;
    margin-top: 150px;
}

.our-story-div {
    display: inline-block;
}

#primary {


    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    width:35%;

}

#secondary {


    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    width: 35%;

}

/**********************
***Contact us***********/

.contact-wrapper {
    text-align: center;
    font-size:0;
    margin-top: 150px;
}



#service-area {
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    width:35%;

}

#contact-info {
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    width:35%;


}


/**********************
***Footer***********/

footer {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    Left: 0;
    height: 80px;
    text-align: center;
}

.socialmedia {
    display: inline-block;
}




#copyright {   
    font-size: 10px;

}

#copyright:link {
    color: silver;
}

#copyright:visited {
       color: silver; 
}

#copyright:hover {
    color: black;
}

3 Answers

luiscampos3
luiscampos3
4,904 Points

Hi Jason, I played around with your code on codepen. The problem seems to be in your css code. I took out position: absolute; I also added clear: both; It's also a good idea to add padding-top to those elements. You also added an extra "left", use margin instead of right,left,bottom. Try it out and let me know. 

footer {
   clear: both;
    margin:0;
    height: 80px;
    text-align: center;
}
Jason Ladieu
Jason Ladieu
10,635 Points

This fixes the issue with the footer overlapping, but now it is no longer pinned to the bottom of the page. Any suggestions?

luiscampos3
luiscampos3
4,904 Points
luiscampos3
luiscampos3
4,904 Points

I would checkout the CSS layout basic course.It talks about the footer and it may solve your problem. The name of the video is called "creating a sticky footer". Great video and tips on the footer.

Jason Ladieu
Jason Ladieu
10,635 Points

Thank you, I will.

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

hi jason im not really sure what your trying to achieve as i didn't 100% understand your question but i had a go at trying to solve your issue , is this kind of what you meant

http://codepen.io/o-sewell/pen/zqEJmR

i have used a media query to position your footer at the bottom when the screen grows and used background-repeat none so your background doesn't repeat. i hope this helps